From ab8155cec20e61e14948d2bfa36bc91750ce849f Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Thu, 23 Nov 2023 22:52:33 +0100 Subject: [PATCH] :bug: Fix can drag&drop assets of an external library --- .../workspace/sidebar/assets/components.cljs | 77 ++++++++++++------- 1 file changed, 51 insertions(+), 26 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index 37c6483d0..278e3203c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -36,6 +36,11 @@ [potok.core :as ptk] [rumext.v2 :as mf])) +(def drag-data* (atom false)) + +(defn set-drag-data! [data] + (reset! drag-data* data)) + (defn- get-component-root-and-container [file-id component components-v2] (if (= file-id (:id @refs/workspace-file)) @@ -64,7 +69,7 @@ {::mf/wrap-props false} [{:keys [component renaming listing-thumbs? selected file-id on-asset-click on-context-menu on-drag-start do-rename - cancel-rename selected-full selected-paths]}] + cancel-rename selected-full selected-paths local]}] (let [item-ref (mf/use-ref) dragging* (mf/use-state false) @@ -90,7 +95,7 @@ on-component-click (mf/use-fn - (mf/deps component selected) + (mf/deps component-id) (fn [event] (dom/stop-propagation event) (on-asset-click component-id unselect-all event))) @@ -104,26 +109,29 @@ on-drop (mf/use-fn - (mf/deps component dragging* selected selected-full selected-paths) + (mf/deps component dragging* selected selected-full selected-paths local drag-data*) (fn [event] - (cmm/on-drop-asset event component dragging* selected selected-full - selected-paths dwl/rename-component-and-main-instance))) + (when (and local (:local? @drag-data*)) + (cmm/on-drop-asset event component dragging* selected selected-full + selected-paths dwl/rename-component-and-main-instance)))) on-drag-enter (mf/use-fn - (mf/deps component dragging* selected selected-paths) + (mf/deps component dragging* selected selected-paths local drag-data*) (fn [event] - (cmm/on-drag-enter-asset event component dragging* selected selected-paths))) + (when (and local (:local? @drag-data*)) + (cmm/on-drag-enter-asset event component dragging* selected selected-paths)))) on-drag-leave (mf/use-fn - (mf/deps dragging*) + (mf/deps dragging* local drag-data*) (fn [event] - (cmm/on-drag-leave-asset event dragging*))) + (when (and local (:local? @drag-data*)) + (cmm/on-drag-leave-asset event dragging*)))) on-component-drag-start (mf/use-fn - (mf/deps file-id component selected item-ref on-drag-start read-only?) + (mf/deps file-id component selected item-ref on-drag-start read-only? local) (fn [event] (if read-only? (dom/prevent-default event) @@ -221,7 +229,7 @@ {::mf/wrap-props false} [{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected on-asset-click on-drag-start do-rename cancel-rename on-rename-group on-group on-ungroup on-context-menu - selected-full]}] + selected-full local]}] (let [group-open? (or ^boolean force-open? ^boolean (get open-groups prefix (if (= prefix "") true false))) @@ -229,27 +237,31 @@ dragging* (mf/use-state false) dragging? (deref dragging*) + selected-paths (mf/with-memo [selected-full] (into #{} (comp (map :path) (d/nilv "")) selected-full)) on-drag-enter (mf/use-fn - (mf/deps dragging* prefix selected-paths) + (mf/deps dragging* prefix selected-paths local drag-data*) (fn [event] - (cmm/on-drag-enter-asset-group event dragging* prefix selected-paths))) + (when (and local (:local? @drag-data*)) + (cmm/on-drag-enter-asset-group event dragging* prefix selected-paths)))) on-drag-leave (mf/use-fn - (mf/deps dragging*) + (mf/deps dragging* local drag-data*) (fn [event] - (cmm/on-drag-leave-asset event dragging*))) + (when (and local (:local? @drag-data*)) + (cmm/on-drag-leave-asset event dragging*)))) on-drop (mf/use-fn - (mf/deps dragging* prefix selected-paths selected-full) + (mf/deps dragging* prefix selected-paths selected-full local drag-data*) (fn [event] - (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component-and-main-instance)))] + (when (and local (:local? @drag-data*)) + (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-component-and-main-instance))))] (if ^boolean new-css-system [:div {:class (dom/classnames (css :component-group) true) @@ -275,7 +287,8 @@ (css :drop-space) (and (empty? components) (some? groups) - (not dragging?))) + (not dragging?) + local)) :on-drag-enter on-drag-enter :on-drag-leave on-drag-leave :on-drag-over dom/prevent-default @@ -286,7 +299,8 @@ (when (and (empty? components) - (some? groups)) + (some? groups) + local) [:div {:class (dom/classnames (css :drop-space) true)}]) (for [component components] @@ -304,7 +318,8 @@ :on-drag-start on-drag-start :on-group on-group :do-rename do-rename - :cancel-rename cancel-rename}])]) + :cancel-rename cancel-rename + :local local}])]) (for [[path-item content] groups] (when-not (empty? path-item) @@ -324,7 +339,8 @@ :on-rename-group on-rename-group :on-ungroup on-ungroup :on-context-menu on-context-menu - :selected-full selected-full}]))])] + :selected-full selected-full + :local local}]))])] [:div {:on-drag-enter on-drag-enter @@ -350,7 +366,8 @@ :drop-space (and (empty? components) (some? groups) - (not dragging?))) + (not dragging?) + local)) :on-drag-enter on-drag-enter :on-drag-leave on-drag-leave :on-drag-over dom/prevent-default @@ -360,7 +377,8 @@ [:div.grid-placeholder "\u00A0"]) (when (and (empty? components) - (some? groups)) + (some? groups) + local) [:div.drop-space]) (for [component components] @@ -378,7 +396,8 @@ :on-drag-start on-drag-start :on-group on-group :do-rename do-rename - :cancel-rename cancel-rename}])]) + :cancel-rename cancel-rename + :local local}])]) (for [[path-item content] groups] (when-not (empty? path-item) @@ -398,7 +417,8 @@ :on-rename-group on-rename-group :on-ungroup on-ungroup :on-context-menu on-context-menu - :selected-full selected-full}]))])]))) + :selected-full selected-full + :local local}]))])]))) (mf/defc components-section {::mf/wrap-props false} @@ -571,6 +591,10 @@ (mf/use-fn (mf/deps file-id) (fn [component event] + ;; dnd api only allow to acces to the dataTransfer data on on-drop (https://html.spec.whatwg.org/dev/dnd.html#concept-dnd-p) + ;; We need to know if the dragged element is from the local library on on-drag-enter, so we need to keep the info elsewhere + (set-drag-data! {:local? local?}) + (dnd/set-data! event "penpot/component" {:file-id file-id :component component}) (dnd/set-allowed-effect! event "move"))) @@ -641,7 +665,8 @@ :on-group on-group :on-ungroup on-ungroup :on-context-menu on-context-menu - :selected-full selected-full}]) + :selected-full selected-full + :local ^boolean local?}]) (when ^boolean local? [:& cmm/assets-context-menu {:on-close on-close-menu