3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 17:01:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Refactor how click is handled on assets panel

Browse source 
Remove deep partial application with simple return value signal
if default click handler is intercepted or not.
This commit is contained in:
Andrey Antukh 2025-01-16 17:58:59 +01:00
parent 99d7b7ebf8
commit f32531b39f
6 changed files with 35 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

4
common/src/app/common/types/file.cljc
View file

@ -464,8 +464,8 @@
Returns a list ((asset ((container shapes) (container shapes)...))...)" Returns a list ((asset ((container shapes) (container shapes)...))...)"
[file-data library-data asset-type] [file-data library-data asset-type]
(let [assets-seq (case asset-type (let [assets-seq (case asset-type
:component (ctkl/components-seq library-data) :component (ctkl/components-seq library-data)
:color (ctcl/colors-seq library-data) :color (ctcl/colors-seq library-data)
:typography (ctyl/typographies-seq library-data)) :typography (ctyl/typographies-seq library-data))
find-usages-in-container find-usages-in-container

28
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

@ -64,19 +64,6 @@
(:color color) (:color color) (:color color) (:color color)
:else (:value color)) :else (:value color))
apply-color
(mf/use-fn
(mf/deps color)
(fn [event]
(st/emit!
(dwl/add-recent-color color)
(dc/apply-color-from-palette color (kbd/alt? event))
(ptk/event
::ev/event
{::ev/name "use-library-color"
::ev/origin "sidebar"
:external-library (not local?)}))))
rename-color rename-color
(mf/use-fn (mf/use-fn
(mf/deps file-id color-id) (mf/deps file-id color-id)
@ -189,10 +176,17 @@
on-click on-click
(mf/use-fn (mf/use-fn
(mf/deps color-id apply-color on-asset-click read-only?) (mf/deps color on-asset-click read-only?)
(when-not read-only? (fn [event]
(dwl/add-recent-color color) (when-not read-only?
(partial on-asset-click color-id apply-color)))] (st/emit! (ptk/data-event ::ev/event
{::ev/name "use-library-color"
::ev/origin "sidebar"
:external-library (not local?)}))
(when-not (on-asset-click event (:id color))
(st/emit! (dwl/add-recent-color color)
(dc/apply-color-from-palette color (kbd/alt? event)))))))]
(mf/with-effect [editing?] (mf/with-effect [editing?]
(when editing? (when editing?

8
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View file

@ -71,17 +71,13 @@
[root-shape container] [root-shape container]
(get-component-root-and-container file-id component) (get-component-root-and-container file-id component)
unselect-all
(mf/use-fn
(fn []
(st/emit! (dw/unselect-all-assets))))
on-component-click on-component-click
(mf/use-fn (mf/use-fn
(mf/deps component-id on-asset-click) (mf/deps component-id on-asset-click)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(on-asset-click component-id unselect-all event))) (when-not (on-asset-click event component-id)
(st/emit! (dw/unselect-all-assets)))))
on-component-double-click on-component-double-click
(mf/use-fn (mf/use-fn

12
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View file

@ -196,21 +196,19 @@
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps file-id selected) (mf/deps file-id selected)
(fn [asset-type asset-groups asset-id default-click event] (fn [asset-type asset-groups event asset-id]
(cond (cond
(kbd/mod? event) (kbd/mod? event)
(do (do
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/toggle-selected-assets file-id asset-id asset-type))) (st/emit! (dw/toggle-selected-assets file-id asset-id asset-type))
true)
(kbd/shift? event) (kbd/shift? event)
(do (do
(dom/stop-propagation event) (dom/stop-propagation event)
(extend-selected selected asset-type asset-groups asset-id file-id)) (extend-selected selected asset-type asset-groups asset-id file-id)
true))))
:else
(when default-click
(default-click event)))))
on-component-click on-component-click
(mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :components)) (mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :components))

4
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
View file

@ -82,7 +82,9 @@
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps object-id on-asset-click) (mf/deps object-id on-asset-click)
(partial on-asset-click object-id nil))] (fn [event]
(on-asset-click event object-id)))]
[:div {:ref item-ref [:div {:ref item-ref
:class-name (stl/css-case :class-name (stl/css-case
:selected (contains? selected-objects object-id) :selected (contains? selected-objects object-id)

43
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View file

@ -39,7 +39,7 @@
(mf/defc typography-item (mf/defc typography-item
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [typography file-id local? handle-change selected apply-typography editing-id renaming-id on-asset-click [{:keys [typography file-id local? handle-change selected editing-id renaming-id on-asset-click
on-context-menu selected-full selected-paths move-typography rename?]}] on-context-menu selected-full selected-paths move-typography rename?]}]
(let [item-ref (mf/use-ref) (let [item-ref (mf/use-ref)
typography-id (:id typography) typography-id (:id typography)
@ -91,26 +91,17 @@
(mf/deps typography) (mf/deps typography)
(partial handle-change typography)) (partial handle-change typography))
apply-typography
(mf/use-fn
(mf/deps typography)
(partial apply-typography typography))
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps typography apply-typography on-asset-click) (mf/deps typography on-asset-click read-only? local?)
(partial on-asset-click typography-id apply-typography)) (fn [event]
(when-not read-only?
on-click (st/emit! (ptk/data-event ::ev/event
(mf/use-fn {::ev/name "use-library-typography"
(mf/deps typography apply-typography on-asset-click) ::ev/origin "sidebar"
(fn [ev] :external-library (not local?)}))
(st/emit! (ptk/event (when-not (on-asset-click event (:id typography))
::ev/event (st/emit! (dwt/apply-typography typography file-id))))))]
{::ev/name "use-library-typography"
::ev/origin "sidebar"
:external-library (not local?)}))
(on-asset-click ev)))]
[:div {:class (stl/css :typography-item) [:div {:class (stl/css :typography-item)
:ref item-ref :ref item-ref
@ -126,7 +117,7 @@
:typography typography :typography typography
:local? local? :local? local?
:selected? (contains? selected typography-id) :selected? (contains? selected typography-id)
:on-click on-click :on-click on-asset-click
:on-change handle-change :on-change handle-change
:on-context-menu on-context-menu :on-context-menu on-context-menu
:editing? editing? :editing? editing?
@ -139,7 +130,7 @@
(mf/defc typographies-group (mf/defc typographies-group
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file-id prefix groups open-groups force-open? file local? selected local-data [{:keys [file-id prefix groups open-groups force-open? file local? selected local-data
editing-id renaming-id on-asset-click handle-change apply-typography on-rename-group editing-id renaming-id on-asset-click handle-change on-rename-group
on-ungroup on-context-menu selected-full]}] on-ungroup on-context-menu selected-full]}]
(let [group-open? (if (false? (get open-groups prefix)) ;; if the user has closed it specifically, respect that (let [group-open? (if (false? (get open-groups prefix)) ;; if the user has closed it specifically, respect that
false false
@ -208,7 +199,6 @@
:local? local? :local? local?
:handle-change handle-change :handle-change handle-change
:selected selected :selected selected
:apply-typography apply-typography
:editing-id editing-id :editing-id editing-id
:renaming-id renaming-id :renaming-id renaming-id
:rename? (= (:rename-typography local-data) id) :rename? (= (:rename-typography local-data) id)
@ -234,7 +224,6 @@
:local-data local-data :local-data local-data
:on-asset-click on-asset-click :on-asset-click on-asset-click
:handle-change handle-change :handle-change handle-change
:apply-typography apply-typography
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
@ -284,13 +273,6 @@
(fn [typography changes] (fn [typography changes]
(st/emit! (dwl/update-typography (merge typography changes) file-id)))) (st/emit! (dwl/update-typography (merge typography changes) file-id))))
apply-typography
(mf/use-fn
(mf/deps file-id read-only?)
(fn [typography _event]
(when-not read-only?
(st/emit! (dwt/apply-typography typography file-id)))))
create-group create-group
(mf/use-fn (mf/use-fn
(mf/deps typographies selected on-clear-selection file-id (:id @state)) (mf/deps typographies selected on-clear-selection file-id (:id @state))
@ -438,7 +420,6 @@
:local-data local-data :local-data local-data
:on-asset-click on-asset-click :on-asset-click on-asset-click
:handle-change handle-change :handle-change handle-change
:apply-typography apply-typography
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu