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

✨ Allow dropping only objects of the same type

Browse source
This commit is contained in:
Andrés Moya 2020-05-25 12:15:36 +02:00
parent da77aa558e
commit 47901870bd
3 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/uxbox/main/ui/hooks.cljs
View file

@ -117,7 +117,7 @@
;; (if (.-relatedTarget event) (.-textContent (.-relatedTarget event)) "null"))) ;; (if (.-relatedTarget event) (.-textContent (.-relatedTarget event)) "null")))
(defn use-sortable (defn use-sortable
[& {:keys [type data on-drop on-drag on-hold detect-center?] :as opts}] [& {:keys [data-type data on-drop on-drag on-hold detect-center?] :as opts}]
(let [ref (mf/use-ref) (let [ref (mf/use-ref)
state (mf/use-state {:over nil state (mf/use-state {:over nil
:timer nil}) :timer nil})
@ -129,7 +129,7 @@
(let [dtrans (unchecked-get event "dataTransfer")] (let [dtrans (unchecked-get event "dataTransfer")]
(.setDragImage dtrans (invisible-image) 0 0) (.setDragImage dtrans (invisible-image) 0 0)
(set! (.-effectAllowed dtrans) "move") (set! (.-effectAllowed dtrans) "move")
(.setData dtrans "application/json" (t/encode data)) (.setData dtrans data-type (t/encode data))
(when (fn? on-drag) (when (fn? on-drag)
(on-drag data)))) (on-drag data))))
@ -149,17 +149,18 @@
on-drag-over on-drag-over
(fn [event] (fn [event]
(dom/prevent-default event) ;; prevent default to allow drag over (let [dtrans (unchecked-get event "dataTransfer")
(let [target (dom/get-target event) target (.-currentTarget event)
related (.-relatedTarget event) related (.-relatedTarget event)
dtrans (unchecked-get event "dataTransfer")
ypos (unchecked-get event "offsetY") ypos (unchecked-get event "offsetY")
height (unchecked-get target "clientHeight") height (unchecked-get target "clientHeight")
side (drop-side height ypos detect-center?)] side (drop-side height ypos detect-center?)]
(when-not (.contains target related) (when (.includes (.-types dtrans) data-type)
(dom/stop-propagation event) (dom/prevent-default event) ;; prevent default to allow drag over
;; (trace event data "drag-over") (when-not (.contains target related)
(swap! state assoc :over side)))) (dom/stop-propagation event)
;; (trace event data "drag-over")
(swap! state assoc :over side)))))
on-drag-leave on-drag-leave
(fn [event] (fn [event]
@ -177,10 +178,10 @@
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
;; (trace event data "drop") ;; (trace event data "drop")
(let [target (dom/get-target event) (let [dtrans (unchecked-get event "dataTransfer")
dtrans (unchecked-get event "dataTransfer") dtdata (.getData dtrans data-type)
dtdata (.getData dtrans "application/json")
target (.-currentTarget event)
ypos (unchecked-get event "offsetY") ypos (unchecked-get event "offsetY")
height (unchecked-get target "clientHeight") height (unchecked-get target "clientHeight")
side (drop-side height ypos detect-center?)] side (drop-side height ypos detect-center?)]
@ -205,7 +206,6 @@
(fn [] (fn []
(let [dom (mf/ref-val ref)] (let [dom (mf/ref-val ref)]
(.setAttribute dom "draggable" true) (.setAttribute dom "draggable" true)
(.setAttribute dom "data-type" type)
(.addEventListener dom "dragstart" on-drag-start false) (.addEventListener dom "dragstart" on-drag-start false)
(.addEventListener dom "dragenter" on-drag-enter false) (.addEventListener dom "dragenter" on-drag-enter false)
@ -222,7 +222,7 @@
(.removeEventListener dom "dragend" on-drag-end))))] (.removeEventListener dom "dragend" on-drag-end))))]
(mf/use-effect (mf/use-effect
(mf/deps type data on-drop) (mf/deps data on-drop)
on-mount) on-mount)
[(deref state) ref])) [(deref state) ref]))

2
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -163,7 +163,7 @@
(st/emit! (dw/toggle-collapse (:id item))))) (st/emit! (dw/toggle-collapse (:id item)))))
[dprops dref] (hooks/use-sortable [dprops dref] (hooks/use-sortable
:type (str (:frame-id item)) :data-type "uxbox/layer"
:on-drop on-drop :on-drop on-drop
:on-drag on-drag :on-drag on-drag
:on-hold on-hold :on-hold on-hold

2
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -64,7 +64,7 @@
(st/emit! (dw/relocate-page id index)))) (st/emit! (dw/relocate-page id index))))
[dprops dref] (hooks/use-sortable [dprops dref] (hooks/use-sortable
:type "page" :data-type "uxbox/page"
:on-drop on-drop :on-drop on-drop
:data {:id (:id page) :data {:id (:id page)
:index index :index index