3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-27 21:49:25 +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

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

@ -84,54 +84,57 @@
(: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)
blocked? (:blocked item)
hidden? (:hidden item)
disable-drag (mf/use-state false)
scroll-to-middle? (mf/use-var true)
expanded-iref (mf/with-memo [id]
(-> (l/in [:expanded id])
(l/derived refs/workspace-local)))
expanded? (mf/deref expanded-iref)
selected? (contains? selected id) selected? (contains? selected id)
container? (or (cph/frame-shape? item) container? (or (cph/frame-shape? item)
(cph/group-shape? item)) (cph/group-shape? item))
disable-drag (mf/use-state false)
scroll-to-middle? (mf/use-var true)
expanded-iref (mf/use-memo
(mf/deps id)
(make-collapsed-iref id))
expanded? (mf/deref expanded-iref)
toggle-collapse toggle-collapse
(mf/use-fn
(mf/deps expanded?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(if (and expanded? (kbd/shift? event)) (if (and expanded? (kbd/shift? event))
(st/emit! (dwc/collapse-all)) (st/emit! (dwc/collapse-all))
(st/emit! (dwc/toggle-collapse id)))) (st/emit! (dwc/toggle-collapse id)))))
toggle-blocking toggle-blocking
(mf/use-fn
(mf/deps id blocked?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(if (:blocked item) (if blocked?
(st/emit! (dw/update-shape-flags [id] {:blocked false})) (st/emit! (dw/update-shape-flags [id] {:blocked false}))
(st/emit! (dw/update-shape-flags [id] {:blocked true}) (st/emit! (dw/update-shape-flags [id] {:blocked true})
(dw/deselect-shape id)))) (dw/deselect-shape id)))))
toggle-visibility toggle-visibility
(mf/use-fn
(mf/deps hidden?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(if (:hidden item) (if hidden?
(st/emit! (dw/update-shape-flags [id] {:hidden false})) (st/emit! (dw/update-shape-flags [id] {:hidden false}))
(st/emit! (dw/update-shape-flags [id] {:hidden true})))) (st/emit! (dw/update-shape-flags [id] {:hidden true})))))
select-shape select-shape
(mf/use-fn
(mf/deps id)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(reset! scroll-to-middle? false) (reset! scroll-to-middle? false)
(let [id (:id item)]
(cond (cond
(kbd/shift? event) (kbd/shift? event)
(st/emit! (dw/shift-select-shapes id)) (st/emit! (dw/shift-select-shapes id))
@ -141,44 +144,54 @@
(> (count selected) 1) (> (count selected) 1)
(st/emit! (dw/select-shape id)) (st/emit! (dw/select-shape id))
:else :else
(st/emit! (dw/select-shape id))))) (st/emit! (dw/select-shape id)))))
on-pointer-enter on-pointer-enter
(mf/use-fn
(mf/deps id)
(fn [event] (fn [event]
(let [id (:id item)]
(st/emit! (dw/highlight-shape id)))) (st/emit! (dw/highlight-shape id))))
on-pointer-leave on-pointer-leave
(mf/use-fn
(mf/deps id)
(fn [event] (fn [event]
(let [id (:id item)]
(st/emit! (dw/dehighlight-shape id)))) (st/emit! (dw/dehighlight-shape id))))
on-context-menu on-context-menu
(mf/use-fn
(mf/deps item)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(let [pos (dom/get-client-position event)] (let [pos (dom/get-client-position event)]
(st/emit! (dw/show-shape-context-menu {:position pos (st/emit! (dw/show-shape-context-menu {:position pos :shape item})))))
:shape item}))))
on-drag on-drag
(mf/use-fn
(mf/deps id selected)
(fn [{:keys [id]}] (fn [{:keys [id]}]
(when (not (contains? selected id)) (when (not (contains? selected id))
(st/emit! (dw/select-shape id)))) (st/emit! (dw/select-shape id)))))
on-drop on-drop
(mf/use-fn
(mf/deps id)
(fn [side _data] (fn [side _data]
(if (= side :center) (if (= side :center)
(st/emit! (dw/relocate-selected-shapes (:id item) 0)) (st/emit! (dw/relocate-selected-shapes id 0))
(let [to-index (if (= side :top) (inc index) index) (let [to-index (if (= side :top) (inc index) index)
parent-id (cph/get-parent-id objects (:id item))] parent-id (cph/get-parent-id objects id)]
(st/emit! (dw/relocate-selected-shapes parent-id to-index))))) (st/emit! (dw/relocate-selected-shapes parent-id to-index))))))
on-hold on-hold
(mf/use-fn
(mf/deps id expanded?)
(fn [] (fn []
(when-not expanded? (when-not expanded?
(st/emit! (dwc/toggle-collapse (:id item))))) (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,9 +206,7 @@
ref (mf/use-ref)] ref (mf/use-ref)]
(mf/use-effect (mf/with-effect [selected? selected]
(mf/deps selected? selected)
(fn []
(let [single? (= (count selected) 1) (let [single? (= (count selected) 1)
node (mf/ref-val ref) node (mf/ref-val ref)
@ -211,7 +222,7 @@
(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