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