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

✨ Properly use use-fn hook on layer-item component on sidebar

Browse source
This commit is contained in:
Andrey Antukh 2022-07-28 08:52:42 +02:00
parent b5796b4cdb
commit d2aa985714
1 changed files with 97 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

183
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -84,101 +84,114 @@
(:name shape "") (:name shape "")
(when (seq (:touched shape)) " *")]))) (when (seq (:touched shape)) " *")])))
(defn- make-collapsed-iref
[id]
#(-> (l/in [:expanded id])
(l/derived refs/workspace-local)))
(mf/defc layer-item (mf/defc layer-item
[{:keys [index item selected objects] :as props}] [{:keys [index item selected objects] :as props}]
(let [id (:id item) (let [id (:id item)
selected? (contains? selected id) blocked? (:blocked item)
container? (or (cph/frame-shape? item) hidden? (:hidden item)
(cph/group-shape? item))
disable-drag (mf/use-state false) disable-drag (mf/use-state false)
scroll-to-middle? (mf/use-var true) scroll-to-middle? (mf/use-var true)
expanded-iref (mf/with-memo [id]
(-> (l/in [:expanded id])
(l/derived refs/workspace-local)))
expanded-iref (mf/use-memo expanded? (mf/deref expanded-iref)
(mf/deps id) selected? (contains? selected id)
(make-collapsed-iref id)) container? (or (cph/frame-shape? item)
(cph/group-shape? item))
expanded? (mf/deref expanded-iref)
toggle-collapse toggle-collapse
(fn [event] (mf/use-fn
(dom/stop-propagation event) (mf/deps expanded?)
(if (and expanded? (kbd/shift? event)) (fn [event]
(st/emit! (dwc/collapse-all)) (dom/stop-propagation event)
(st/emit! (dwc/toggle-collapse id)))) (if (and expanded? (kbd/shift? event))
(st/emit! (dwc/collapse-all))
(st/emit! (dwc/toggle-collapse id)))))
toggle-blocking toggle-blocking
(fn [event] (mf/use-fn
(dom/stop-propagation event) (mf/deps id blocked?)
(if (:blocked item) (fn [event]
(st/emit! (dw/update-shape-flags [id] {:blocked false})) (dom/stop-propagation event)
(st/emit! (dw/update-shape-flags [id] {:blocked true}) (if blocked?
(dw/deselect-shape id)))) (st/emit! (dw/update-shape-flags [id] {:blocked false}))
(st/emit! (dw/update-shape-flags [id] {:blocked true})
(dw/deselect-shape id)))))
toggle-visibility toggle-visibility
(fn [event] (mf/use-fn
(dom/stop-propagation event) (mf/deps hidden?)
(if (:hidden item) (fn [event]
(st/emit! (dw/update-shape-flags [id] {:hidden false})) (dom/stop-propagation event)
(st/emit! (dw/update-shape-flags [id] {:hidden true})))) (if hidden?
(st/emit! (dw/update-shape-flags [id] {:hidden false}))
(st/emit! (dw/update-shape-flags [id] {:hidden true})))))
select-shape select-shape
(fn [event] (mf/use-fn
(dom/prevent-default event) (mf/deps id)
(reset! scroll-to-middle? false) (fn [event]
(let [id (:id item)] (dom/prevent-default event)
(cond (reset! scroll-to-middle? false)
(kbd/shift? event) (cond
(st/emit! (dw/shift-select-shapes id)) (kbd/shift? event)
(st/emit! (dw/shift-select-shapes id))
(kbd/mod? event) (kbd/mod? event)
(st/emit! (dw/select-shape id true)) (st/emit! (dw/select-shape id true))
(> (count selected) 1) (> (count selected) 1)
(st/emit! (dw/select-shape id)) (st/emit! (dw/select-shape id))
:else
(st/emit! (dw/select-shape id))))) :else
(st/emit! (dw/select-shape id)))))
on-pointer-enter on-pointer-enter
(fn [event] (mf/use-fn
(let [id (:id item)] (mf/deps id)
(st/emit! (dw/highlight-shape id)))) (fn [event]
(st/emit! (dw/highlight-shape id))))
on-pointer-leave on-pointer-leave
(fn [event] (mf/use-fn
(let [id (:id item)] (mf/deps id)
(st/emit! (dw/dehighlight-shape id)))) (fn [event]
(st/emit! (dw/dehighlight-shape id))))
on-context-menu on-context-menu
(fn [event] (mf/use-fn
(dom/prevent-default event) (mf/deps item)
(dom/stop-propagation event) (fn [event]
(let [pos (dom/get-client-position event)] (dom/prevent-default event)
(st/emit! (dw/show-shape-context-menu {:position pos (dom/stop-propagation event)
:shape item})))) (let [pos (dom/get-client-position event)]
(st/emit! (dw/show-shape-context-menu {:position pos :shape item})))))
on-drag on-drag
(fn [{:keys [id]}] (mf/use-fn
(when (not (contains? selected id)) (mf/deps id selected)
(st/emit! (dw/select-shape id)))) (fn [{:keys [id]}]
(when (not (contains? selected id))
(st/emit! (dw/select-shape id)))))
on-drop on-drop
(fn [side _data] (mf/use-fn
(if (= side :center) (mf/deps id)
(st/emit! (dw/relocate-selected-shapes (:id item) 0)) (fn [side _data]
(let [to-index (if (= side :top) (inc index) index) (if (= side :center)
parent-id (cph/get-parent-id objects (:id item))] (st/emit! (dw/relocate-selected-shapes id 0))
(st/emit! (dw/relocate-selected-shapes parent-id to-index))))) (let [to-index (if (= side :top) (inc index) index)
parent-id (cph/get-parent-id objects id)]
(st/emit! (dw/relocate-selected-shapes parent-id to-index))))))
on-hold on-hold
(fn [] (mf/use-fn
(when-not expanded? (mf/deps id expanded?)
(st/emit! (dwc/toggle-collapse (:id item))))) (fn []
(when-not expanded?
(st/emit! (dwc/toggle-collapse id)))))
[dprops dref] (hooks/use-sortable [dprops dref] (hooks/use-sortable
:data-type "penpot/layer" :data-type "penpot/layer"
@ -193,25 +206,23 @@
ref (mf/use-ref)] ref (mf/use-ref)]
(mf/use-effect (mf/with-effect [selected? selected]
(mf/deps selected? selected) (let [single? (= (count selected) 1)
(fn [] node (mf/ref-val ref)
(let [single? (= (count selected) 1)
node (mf/ref-val ref)
subid subid
(when (and single? selected?) (when (and single? selected?)
(let [scroll-to @scroll-to-middle?] (let [scroll-to @scroll-to-middle?]
(ts/schedule (ts/schedule
100 100
#(if scroll-to #(if scroll-to
(dom/scroll-into-view! node #js {:block "center", :behavior "smooth"}) (dom/scroll-into-view! node #js {:block "center", :behavior "smooth"})
(do (do
(dom/scroll-into-view-if-needed! node #js {:block "center", :behavior "smooth"}) (dom/scroll-into-view-if-needed! node #js {:block "center", :behavior "smooth"})
(reset! scroll-to-middle? true))))))] (reset! scroll-to-middle? true))))))]
#(when (some? subid) #(when (some? subid)
(rx/dispose! subid))))) (rx/dispose! subid))))
[:li {:on-context-menu on-context-menu [:li {:on-context-menu on-context-menu
:ref dref :ref dref
@ -385,7 +396,7 @@
(and (and
(:show-search-box @filter-state) (:show-search-box @filter-state)
(or (d/not-empty? (:search-text @filter-state)) (or (d/not-empty? (:search-text @filter-state))
(d/not-empty? (:active-filters @filter-state)))) (d/not-empty? (:active-filters @filter-state))))
search-and-filters search-and-filters
(fn [[id shape]] (fn [[id shape]]
@ -438,7 +449,7 @@
[filtered-objects [filtered-objects
handle-show-more handle-show-more
(mf/html (mf/html
(if (:show-search-box @filter-state) (if (:show-search-box @filter-state)
[:* [:*
@ -499,7 +510,7 @@
(fn [entries] (fn [entries]
(when (and (.-isIntersecting (first entries)) (some? show-more)) (when (and (.-isIntersecting (first entries)) (some? show-more))
(show-more))) (show-more)))
on-render-container on-render-container
(fn [element] (fn [element]
(let [options #js {:root element} (let [options #js {:root element}