mirror of
https://github.com/penpot/penpot.git
synced 2025-02-08 08:09:14 -05:00
♻️ Refactor how click is handled on assets panel
Remove deep partial application with simple return value signal if default click handler is intercepted or not.
This commit is contained in:
Andrey Antukh
parent
99d7b7ebf8
commit
f32531b39f
6 changed files with 35 additions and 64 deletions
|
|
@ -464,8 +464,8 @@
|
|||
Returns a list ((asset ((container shapes) (container shapes)...))...)"
|
||||
[file-data library-data asset-type]
|
||||
(let [assets-seq (case asset-type
|
||||
:component (ctkl/components-seq library-data)
|
||||
:color (ctcl/colors-seq library-data)
|
||||
:component (ctkl/components-seq library-data)
|
||||
:color (ctcl/colors-seq library-data)
|
||||
:typography (ctyl/typographies-seq library-data))
|
||||
|
||||
find-usages-in-container
|
||||
|
|
|
|||
|
|
@ -64,19 +64,6 @@
|
|||
(:color color) (:color 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
|
||||
(mf/use-fn
|
||||
(mf/deps file-id color-id)
|
||||
|
|
@ -189,10 +176,17 @@
|
|||
|
||||
on-click
|
||||
(mf/use-fn
|
||||
(mf/deps color-id apply-color on-asset-click read-only?)
|
||||
(when-not read-only?
|
||||
(dwl/add-recent-color color)
|
||||
(partial on-asset-click color-id apply-color)))]
|
||||
(mf/deps color on-asset-click read-only?)
|
||||
(fn [event]
|
||||
(when-not read-only?
|
||||
(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?]
|
||||
(when editing?
|
||||
|
|
|
|||
|
|
@ -71,17 +71,13 @@
|
|||
[root-shape container]
|
||||
(get-component-root-and-container file-id component)
|
||||
|
||||
unselect-all
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (dw/unselect-all-assets))))
|
||||
|
||||
on-component-click
|
||||
(mf/use-fn
|
||||
(mf/deps component-id on-asset-click)
|
||||
(fn [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
|
||||
(mf/use-fn
|
||||
|
|
|
|||
|
|
@ -196,21 +196,19 @@
|
|||
on-asset-click
|
||||
(mf/use-fn
|
||||
(mf/deps file-id selected)
|
||||
(fn [asset-type asset-groups asset-id default-click event]
|
||||
(fn [asset-type asset-groups event asset-id]
|
||||
(cond
|
||||
(kbd/mod? event)
|
||||
(do
|
||||
(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)
|
||||
(do
|
||||
(dom/stop-propagation event)
|
||||
(extend-selected selected asset-type asset-groups asset-id file-id))
|
||||
|
||||
:else
|
||||
(when default-click
|
||||
(default-click event)))))
|
||||
(extend-selected selected asset-type asset-groups asset-id file-id)
|
||||
true))))
|
||||
|
||||
on-component-click
|
||||
(mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :components))
|
||||
|
|
|
|||
|
|
@ -82,7 +82,9 @@
|
|||
on-asset-click
|
||||
(mf/use-fn
|
||||
(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
|
||||
:class-name (stl/css-case
|
||||
:selected (contains? selected-objects object-id)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
(mf/defc typography-item
|
||||
{::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?]}]
|
||||
(let [item-ref (mf/use-ref)
|
||||
typography-id (:id typography)
|
||||
|
|
@ -91,26 +91,17 @@
|
|||
(mf/deps typography)
|
||||
(partial handle-change typography))
|
||||
|
||||
apply-typography
|
||||
(mf/use-fn
|
||||
(mf/deps typography)
|
||||
(partial apply-typography typography))
|
||||
|
||||
on-asset-click
|
||||
(mf/use-fn
|
||||
(mf/deps typography apply-typography on-asset-click)
|
||||
(partial on-asset-click typography-id apply-typography))
|
||||
|
||||
on-click
|
||||
(mf/use-fn
|
||||
(mf/deps typography apply-typography on-asset-click)
|
||||
(fn [ev]
|
||||
(st/emit! (ptk/event
|
||||
::ev/event
|
||||
{::ev/name "use-library-typography"
|
||||
::ev/origin "sidebar"
|
||||
:external-library (not local?)}))
|
||||
(on-asset-click ev)))]
|
||||
(mf/deps typography on-asset-click read-only? local?)
|
||||
(fn [event]
|
||||
(when-not read-only?
|
||||
(st/emit! (ptk/data-event ::ev/event
|
||||
{::ev/name "use-library-typography"
|
||||
::ev/origin "sidebar"
|
||||
:external-library (not local?)}))
|
||||
(when-not (on-asset-click event (:id typography))
|
||||
(st/emit! (dwt/apply-typography typography file-id))))))]
|
||||
|
||||
[:div {:class (stl/css :typography-item)
|
||||
:ref item-ref
|
||||
|
|
@ -126,7 +117,7 @@
|
|||
:typography typography
|
||||
:local? local?
|
||||
:selected? (contains? selected typography-id)
|
||||
:on-click on-click
|
||||
:on-click on-asset-click
|
||||
:on-change handle-change
|
||||
:on-context-menu on-context-menu
|
||||
:editing? editing?
|
||||
|
|
@ -139,7 +130,7 @@
|
|||
(mf/defc typographies-group
|
||||
{::mf/wrap-props false}
|
||||
[{: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]}]
|
||||
(let [group-open? (if (false? (get open-groups prefix)) ;; if the user has closed it specifically, respect that
|
||||
false
|
||||
|
|
@ -208,7 +199,6 @@
|
|||
:local? local?
|
||||
:handle-change handle-change
|
||||
:selected selected
|
||||
:apply-typography apply-typography
|
||||
:editing-id editing-id
|
||||
:renaming-id renaming-id
|
||||
:rename? (= (:rename-typography local-data) id)
|
||||
|
|
@ -234,7 +224,6 @@
|
|||
:local-data local-data
|
||||
:on-asset-click on-asset-click
|
||||
:handle-change handle-change
|
||||
:apply-typography apply-typography
|
||||
:on-rename-group on-rename-group
|
||||
:on-ungroup on-ungroup
|
||||
:on-context-menu on-context-menu
|
||||
|
|
@ -284,13 +273,6 @@
|
|||
(fn [typography changes]
|
||||
(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
|
||||
(mf/use-fn
|
||||
(mf/deps typographies selected on-clear-selection file-id (:id @state))
|
||||
|
|
@ -438,7 +420,6 @@
|
|||
:local-data local-data
|
||||
:on-asset-click on-asset-click
|
||||
:handle-change handle-change
|
||||
:apply-typography apply-typography
|
||||
:on-rename-group on-rename-group
|
||||
:on-ungroup on-ungroup
|
||||
:on-context-menu on-context-menu
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue