github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-17 12:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡ Add memo to stroke-menu component

Browse Source
This commit is contained in:
Eva Marco 2026-06-12 09:52:02 +02:00
parent ff6b7f57c0
commit 92498863e9
2 changed files with 30 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View File

@ -782,7 +782,6 @@
(let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents*)
_ (prn "values" values)
^boolean
is-absolute? (:layout-item-absolute values)

69
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View File

@ -20,7 +20,6 @@
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.hooks :as h]
[app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row*]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -40,9 +39,29 @@
:stroke-cap-start
:stroke-cap-end])
(defn- stroke-menu-check-props
"A stroke-menu specific memoize check function that only checks if
specific values are changed on provided props. This allows pass the
whole shape as values without adding additional rerenders when other
shape properties changes."
[n-props o-props]
(and (identical? (unchecked-get n-props "ids")
(unchecked-get o-props "ids"))
(identical? (unchecked-get n-props "appliedTokens")
(unchecked-get o-props "appliedTokens"))
(identical? (unchecked-get n-props "showCaps")
(unchecked-get o-props "showCaps"))
(identical? (unchecked-get n-props "disableStrokeStyle")
(unchecked-get o-props "disableStrokeStyle"))
(let [o-vals (unchecked-get o-props "values")
n-vals (unchecked-get n-props "values")
o-strokes (get o-vals :strokes)
n-strokes (get n-vals :strokes)]
(identical? o-strokes n-strokes))))
(mf/defc stroke-menu*
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps" "applied-tokens"]))]}
[{:keys [ids type values show-caps disable-stroke-style applied-tokens shapes objects] :as props}]
{::mf/wrap [#(mf/memo' % stroke-menu-check-props)]}
[{:keys [ids type values show-caps disable-stroke-style applied-tokens]}]
(let [label (case type
:multiple (tr "workspace.options.selection-stroke")
:group (tr "workspace.options.group-stroke")
@ -127,30 +146,6 @@
(st/emit! (udw/trigger-bounding-box-cloaking ids))
(st/emit! (dc/change-stroke-attrs ids {:stroke-gap value} index))))
open-caps-select
(fn [caps-state]
(fn [event]
(let [window-size (dom/get-window-size)
target (dom/get-current-target event)
rect (dom/get-bounding-rect target)
top (if (< (+ (:bottom rect) 320) (:height window-size))
(+ (:bottom rect) 5)
(- (:height window-size) 325))
left (if (< (+ (:left rect) 200) (:width window-size))
(:left rect)
(- (:width window-size) 205))]
(swap! caps-state assoc :open? true
:left left
:top top))))
close-caps-select
(fn [caps-state]
(fn [_]
(swap! caps-state assoc :open? false)))
on-stroke-cap-start-change
(fn [index value]
(st/emit! (udw/trigger-bounding-box-cloaking ids))
@ -231,32 +226,28 @@
[:> h/sortable-container* {}
(for [[index value] (d/enumerate (:strokes values []))]
[:> stroke-row* {:key (dm/str "stroke-" index "-" (hash applied-tokens))
:index index
:stroke value
:title (tr "workspace.options.stroke-color")
:index index
:shapes shapes
:objects objects
:show-caps show-caps
:on-color-change on-color-change
:on-reorder handle-reorder
:on-color-detach on-color-detach
:on-remove on-remove
:on-stroke-width-change on-stroke-width-change
:on-stroke-dash-change on-stroke-dash-change
:on-stroke-gap-change on-stroke-gap-change
:on-stroke-style-change on-stroke-style-change
:on-stroke-alignment-change on-stroke-alignment-change
:open-caps-select open-caps-select
:close-caps-select close-caps-select
:on-stroke-cap-start-change on-stroke-cap-start-change
:on-stroke-cap-end-change on-stroke-cap-end-change
:on-stroke-cap-switch on-stroke-cap-switch
:applied-tokens (when (= 0 index) applied-tokens)
:on-detach-token on-detach-token
:on-remove on-remove
:on-toggle-visibility on-toggle-visibility
:on-reorder handle-reorder
:disable-drag disable-drag
:on-focus on-focus
:select-on-focus (not @disable-drag)
:on-blur on-blur
:ids ids
:disable-stroke-style disable-stroke-style}])])])]))
:applied-tokens (when (= 0 index) applied-tokens)
:on-detach-token on-detach-token
:disable-stroke-style disable-stroke-style
:select-on-focus (not @disable-drag)
:ids ids}])])])]))