Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 16:30:37 -05:00
Code Issues Activity

🐛 Fix can drag&drop assets of an external library

Browse source
This commit is contained in:
Pablo Alba 2023-11-23 22:52:33 +01:00 committed by Andrey Antukh
parent 289e4aa7bf
commit ab8155cec2
1 changed files with 51 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View file

@ -36,6 +36,11 @@
[potok.core :as ptk] [potok.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def drag-data* (atom false))
(defn set-drag-data! [data]
(reset! drag-data* data))
(defn- get-component-root-and-container (defn- get-component-root-and-container
[file-id component components-v2] [file-id component components-v2]
(if (= file-id (:id @refs/workspace-file)) (if (= file-id (:id @refs/workspace-file))
@ -64,7 +69,7 @@
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [component renaming listing-thumbs? selected [{:keys [component renaming listing-thumbs? selected
file-id on-asset-click on-context-menu on-drag-start do-rename 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) (let [item-ref (mf/use-ref)
dragging* (mf/use-state false) dragging* (mf/use-state false)
@ -90,7 +95,7 @@
on-component-click on-component-click
(mf/use-fn (mf/use-fn
(mf/deps component selected) (mf/deps component-id)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(on-asset-click component-id unselect-all event))) (on-asset-click component-id unselect-all event)))
@ -104,26 +109,29 @@
on-drop on-drop
(mf/use-fn (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] (fn [event]
(when (and local (:local? @drag-data*))
(cmm/on-drop-asset event component dragging* selected selected-full (cmm/on-drop-asset event component dragging* selected selected-full
selected-paths dwl/rename-component-and-main-instance))) selected-paths dwl/rename-component-and-main-instance))))
on-drag-enter on-drag-enter
(mf/use-fn (mf/use-fn
(mf/deps component dragging* selected selected-paths) (mf/deps component dragging* selected selected-paths local drag-data*)
(fn [event] (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 on-drag-leave
(mf/use-fn (mf/use-fn
(mf/deps dragging*) (mf/deps dragging* local drag-data*)
(fn [event] (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 on-component-drag-start
(mf/use-fn (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] (fn [event]
(if read-only? (if read-only?
(dom/prevent-default event) (dom/prevent-default event)
@ -221,7 +229,7 @@
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected on-asset-click [{: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 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? (let [group-open? (or ^boolean force-open?
^boolean (get open-groups prefix (if (= prefix "") true false))) ^boolean (get open-groups prefix (if (= prefix "") true false)))
@ -229,27 +237,31 @@
dragging* (mf/use-state false) dragging* (mf/use-state false)
dragging? (deref dragging*) dragging? (deref dragging*)
selected-paths (mf/with-memo [selected-full] selected-paths (mf/with-memo [selected-full]
(into #{} (into #{}
(comp (map :path) (d/nilv "")) (comp (map :path) (d/nilv ""))
selected-full)) selected-full))
on-drag-enter on-drag-enter
(mf/use-fn (mf/use-fn
(mf/deps dragging* prefix selected-paths) (mf/deps dragging* prefix selected-paths local drag-data*)
(fn [event] (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 on-drag-leave
(mf/use-fn (mf/use-fn
(mf/deps dragging*) (mf/deps dragging* local drag-data*)
(fn [event] (fn [event]
(cmm/on-drag-leave-asset event dragging*))) (when (and local (:local? @drag-data*))
(cmm/on-drag-leave-asset event dragging*))))
on-drop on-drop
(mf/use-fn (mf/use-fn
(mf/deps dragging* prefix selected-paths selected-full) (mf/deps dragging* prefix selected-paths selected-full local drag-data*)
(fn [event] (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 (if ^boolean new-css-system
[:div {:class (dom/classnames (css :component-group) true) [:div {:class (dom/classnames (css :component-group) true)
@ -275,7 +287,8 @@
(css :drop-space) (and (css :drop-space) (and
(empty? components) (empty? components)
(some? groups) (some? groups)
(not dragging?))) (not dragging?)
local))
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
@ -286,7 +299,8 @@
(when (and (empty? components) (when (and (empty? components)
(some? groups)) (some? groups)
local)
[:div {:class (dom/classnames (css :drop-space) true)}]) [:div {:class (dom/classnames (css :drop-space) true)}])
(for [component components] (for [component components]
@ -304,7 +318,8 @@
:on-drag-start on-drag-start :on-drag-start on-drag-start
:on-group on-group :on-group on-group
:do-rename do-rename :do-rename do-rename
:cancel-rename cancel-rename}])]) :cancel-rename cancel-rename
:local local}])])
(for [[path-item content] groups] (for [[path-item content] groups]
(when-not (empty? path-item) (when-not (empty? path-item)
@ -324,7 +339,8 @@
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
:selected-full selected-full}]))])] :selected-full selected-full
:local local}]))])]
[:div {:on-drag-enter on-drag-enter [:div {:on-drag-enter on-drag-enter
@ -350,7 +366,8 @@
:drop-space (and :drop-space (and
(empty? components) (empty? components)
(some? groups) (some? groups)
(not dragging?))) (not dragging?)
local))
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
@ -360,7 +377,8 @@
[:div.grid-placeholder "\u00A0"]) [:div.grid-placeholder "\u00A0"])
(when (and (empty? components) (when (and (empty? components)
(some? groups)) (some? groups)
local)
[:div.drop-space]) [:div.drop-space])
(for [component components] (for [component components]
@ -378,7 +396,8 @@
:on-drag-start on-drag-start :on-drag-start on-drag-start
:on-group on-group :on-group on-group
:do-rename do-rename :do-rename do-rename
:cancel-rename cancel-rename}])]) :cancel-rename cancel-rename
:local local}])])
(for [[path-item content] groups] (for [[path-item content] groups]
(when-not (empty? path-item) (when-not (empty? path-item)
@ -398,7 +417,8 @@
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
:selected-full selected-full}]))])]))) :selected-full selected-full
:local local}]))])])))
(mf/defc components-section (mf/defc components-section
{::mf/wrap-props false} {::mf/wrap-props false}
@ -571,6 +591,10 @@
(mf/use-fn (mf/use-fn
(mf/deps file-id) (mf/deps file-id)
(fn [component event] (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 (dnd/set-data! event "penpot/component" {:file-id file-id
:component component}) :component component})
(dnd/set-allowed-effect! event "move"))) (dnd/set-allowed-effect! event "move")))
@ -641,7 +665,8 @@
:on-group on-group :on-group on-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
:selected-full selected-full}]) :selected-full selected-full
:local ^boolean local?}])
(when ^boolean local? (when ^boolean local?
[:& cmm/assets-context-menu [:& cmm/assets-context-menu
{:on-close on-close-menu {:on-close on-close-menu