3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add performance enhancements to colorpicker gradients component

Browse source
This commit is contained in:
Andrey Antukh 2025-01-29 19:13:01 +01:00
parent e0efa63fa1
commit c2fae0fef2
2 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,7 +29,7 @@
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]] [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
[app.main.ui.workspace.colorpicker.gradients :refer [gradients]] [app.main.ui.workspace.colorpicker.gradients :refer [gradients*]]
[app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]] [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
[app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]] [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
[app.main.ui.workspace.colorpicker.libraries :refer [libraries]] [app.main.ui.workspace.colorpicker.libraries :refer [libraries]]
@ -110,7 +110,7 @@
:linear :linear-gradient :linear :linear-gradient
:radial :radial-gradient) :radial :radial-gradient)
:color)) :color))
active-color-tab (mf/use-state (dc/get-active-color-tab)) active-color-tab (mf/use-state #(dc/get-active-color-tab))
drag? (mf/use-state false) drag? (mf/use-state false)
type (if (= @active-color-tab "hsva") :hsv :rgb) type (if (= @active-color-tab "hsva") :hsv :rgb)
@ -436,7 +436,7 @@
i/picker])] i/picker])]
(when (= selected-mode :gradient) (when (= selected-mode :gradient)
[:& gradients [:> gradients*
{:type (:type state) {:type (:type state)
:stops (:stops state) :stops (:stops state)
:editing-stop (:editing-stop state) :editing-stop (:editing-stop state)

16
frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
View file

@ -48,11 +48,11 @@
(str/join ", ") (str/join ", ")
(str/ffmt "linear-gradient(90deg, %1)"))) (str/ffmt "linear-gradient(90deg, %1)")))
(mf/defc stop-input-row (mf/defc stop-input-row*
{::mf/private true}
[{:keys [stop [{:keys [stop
index index
is-selected is-selected
on-select-stop on-select-stop
on-change-stop on-change-stop
on-remove-stop on-remove-stop
@ -61,7 +61,7 @@
on-blur-stop-offset on-blur-stop-offset
on-focus-stop-color on-focus-stop-color
on-blur-stop-color]}] on-blur-stop-color]}]
(let [{:keys [color opacity offset]} stop (let [offset (get stop :offset)
handle-change-stop-color handle-change-stop-color
(mf/use-callback (mf/use-callback
@ -149,19 +149,17 @@
:on-focus handle-focus-stop-offset :on-focus handle-focus-stop-offset
:on-blur handle-blur-stop-offset}]] :on-blur handle-blur-stop-offset}]]
;; FIXME: memoize color
[:> color-row* [:> color-row*
{:disable-gradient true {:disable-gradient true
:disable-picker true :disable-picker true
:color {:color color :color stop
:opacity opacity}
:index index :index index
:on-change handle-change-stop-color :on-change handle-change-stop-color
:on-remove handle-remove-stop :on-remove handle-remove-stop
:on-focus handle-focus-stop-color :on-focus handle-focus-stop-color
:on-blur handle-blur-stop-color}]])) :on-blur handle-blur-stop-color}]]))
(mf/defc gradients (mf/defc gradients*
[{:keys [type [{:keys [type
stops stops
editing-stop editing-stop
@ -177,7 +175,7 @@
on-rotate-stops on-rotate-stops
on-reorder-stops]}] on-reorder-stops]}]
(let [preview-state (mf/use-state {:hover? false :offset 0.5}) (let [preview-state (mf/use-state #(do {:hover? false :offset 0.5}))
dragging-ref (mf/use-ref false) dragging-ref (mf/use-ref false)
start-ref (mf/use-ref nil) start-ref (mf/use-ref nil)
start-offset (mf/use-ref nil) start-offset (mf/use-ref nil)
@ -347,7 +345,7 @@
[:div {:class (stl/css :gradient-stops-list)} [:div {:class (stl/css :gradient-stops-list)}
[:& h/sortable-container {} [:& h/sortable-container {}
(for [[index stop] (d/enumerate stops)] (for [[index stop] (d/enumerate stops)]
[:& stop-input-row [:> stop-input-row*
{:key index {:key index
:stop stop :stop stop
:index index :index index