mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
More work on drag and drop of layers.
This commit is contained in:
Andrey Antukh
parent
811f47f929
commit
c9e71539cb
2 changed files with 60 additions and 95 deletions
|
|
@ -377,39 +377,67 @@
|
||||||
(rx/from-coll
|
(rx/from-coll
|
||||||
(map unlock-shape (:items shape))))))))
|
(map unlock-shape (:items shape))))))))
|
||||||
|
|
||||||
(defn transfer-after
|
(defn transfer-shape
|
||||||
"Event used in drag and drop for transfer shape
|
"Event used in drag and drop for transfer shape
|
||||||
from one position to an other."
|
from one position to an other."
|
||||||
[sid tid]
|
[sid tid type]
|
||||||
(reify
|
(letfn [(transfer-to-group [state target])
|
||||||
rs/UpdateEvent
|
|
||||||
(-apply-update [_ state]
|
|
||||||
(let [sitem (get-in state [:shapes-by-id sid])
|
|
||||||
titem (get-in state [:shapes-by-id tid])
|
|
||||||
page (get-in state [:pages-by-id (:page titem)])
|
|
||||||
index (index-of (:shapes page) tid)
|
|
||||||
[fst snd] (split-at (inc index) (:shapes page))
|
|
||||||
|
|
||||||
fst (remove #(= % sid) fst)
|
(transfer-at [index shapes sid]
|
||||||
snd (remove #(= % sid) snd)
|
(let [[fst snd] (split-at index shapes)]
|
||||||
|
(concat fst [sid] snd)))
|
||||||
|
|
||||||
items (concat fst [sid] snd)]
|
(remove-source [state {:keys [id page group] :as source}]
|
||||||
(assoc-in state [:pages-by-id (:page titem) :shapes] items)))))
|
(let [shapes (if group
|
||||||
|
(get-in state [:shapes-by-id group :items])
|
||||||
|
(get-in state [:pages-by-id page :shapes]))
|
||||||
|
shapes (remove #(= % id) shapes)]
|
||||||
|
(if group
|
||||||
|
(assoc-in state [:shapes-by-id group :items] shapes)
|
||||||
|
(assoc-in state [:pages-by-id page :shapes] shapes))))
|
||||||
|
|
||||||
(defn transfer-before
|
(transfer-after [state {:keys [page group] :as target}]
|
||||||
[sid tid]
|
(let [shapes (if group
|
||||||
(reify
|
(get-in state [:shapes-by-id group :items])
|
||||||
rs/UpdateEvent
|
(get-in state [:pages-by-id page :shapes]))
|
||||||
(-apply-update [_ state]
|
shapes (-> (inc (index-of shapes tid))
|
||||||
(let [sitem (get-in state [:shapes-by-id sid])
|
(transfer-at shapes sid))]
|
||||||
titem (get-in state [:shapes-by-id tid])
|
(if group
|
||||||
page (get-in state [:pages-by-id (:page titem)])
|
(as-> state $
|
||||||
index (index-of (:shapes page) tid)
|
(assoc-in $ [:shapes-by-id group :items] shapes)
|
||||||
[fst snd] (split-at index (:shapes page))
|
(update-in $ [:shapes-by-id sid] assoc :group group))
|
||||||
fst (remove #(= % sid) fst)
|
(as-> state $
|
||||||
snd (remove #(= % sid) snd)
|
(assoc-in $ [:pages-by-id page :shapes] shapes)
|
||||||
items (concat fst [sid] snd)]
|
(update-in $ [:shapes-by-id sid] dissoc :group)))))
|
||||||
(assoc-in state [:pages-by-id (:page titem) :shapes] items)))))
|
|
||||||
|
(transfer-before [state {:keys [page group] :as target}]
|
||||||
|
(let [shapes (if group
|
||||||
|
(get-in state [:shapes-by-id group :items])
|
||||||
|
(get-in state [:pages-by-id page :shapes]))
|
||||||
|
shapes (-> (index-of shapes tid)
|
||||||
|
(transfer-at shapes sid))]
|
||||||
|
(if group
|
||||||
|
(as-> state $
|
||||||
|
(assoc-in $ [:shapes-by-id group :items] shapes)
|
||||||
|
(update-in $ [:shapes-by-id sid] assoc :group group))
|
||||||
|
(as-> state $
|
||||||
|
(assoc-in $ [:pages-by-id page :shapes] shapes)
|
||||||
|
(update-in $ [:shapes-by-id sid] dissoc :group)))))]
|
||||||
|
(reify
|
||||||
|
rs/UpdateEvent
|
||||||
|
(-apply-update [_ state]
|
||||||
|
(let [target (get-in state [:shapes-by-id tid])
|
||||||
|
source (get-in state [:shapes-by-id sid])
|
||||||
|
state (remove-source state source)]
|
||||||
|
(cond
|
||||||
|
(and (= type :inside) (:group target))
|
||||||
|
(transfer-to-group state target)
|
||||||
|
|
||||||
|
(= type :before)
|
||||||
|
(transfer-before state target)
|
||||||
|
|
||||||
|
(= type :after)
|
||||||
|
(transfer-after state target)))))))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
;; Events (for selected)
|
;; Events (for selected)
|
||||||
|
|
|
||||||
|
|
@ -135,15 +135,15 @@
|
||||||
id (read-string (.getData dt "item/uuid"))
|
id (read-string (.getData dt "item/uuid"))
|
||||||
over (:over @local)]
|
over (:over @local)]
|
||||||
(case (:over @local)
|
(case (:over @local)
|
||||||
:top (rs/emit! (dw/transfer-before id (:id item)))
|
:top (rs/emit! (dw/transfer-shape id (:id item) :before))
|
||||||
:bottom (rs/emit! (dw/transfer-after id (:id item)))
|
:bottom (rs/emit! (dw/transfer-shape id (:id item) :after))
|
||||||
;; :middle (rs/emit! (dw/transfer-inside id (:id item)))
|
;; :middle (rs/emit! (dw/transfer-inside id (:id item)))
|
||||||
)
|
)
|
||||||
(swap! local assoc :dragging false :over nil)))
|
(swap! local assoc :dragging false :over nil)))
|
||||||
(on-drag-over [event]
|
(on-drag-over [event]
|
||||||
(dom/prevent-default event)
|
(dom/prevent-default event)
|
||||||
(let [dt (.-dataTransfer event)
|
(let [dt (.-dataTransfer event)
|
||||||
over (get-hover-position event (:group item))]
|
over (get-hover-position event false)]
|
||||||
(set! (.-dropEffect dt) "move")
|
(set! (.-dropEffect dt) "move")
|
||||||
(swap! local assoc :over over)))
|
(swap! local assoc :over over)))
|
||||||
(on-drag-enter [event]
|
(on-drag-enter [event]
|
||||||
|
|
@ -239,63 +239,6 @@
|
||||||
:name "layer-group"
|
:name "layer-group"
|
||||||
:mixins [mx/static rum/reactive (mx/local)]}))
|
:mixins [mx/static rum/reactive (mx/local)]}))
|
||||||
|
|
||||||
|
|
||||||
;; (defn layers-did-mount
|
|
||||||
;; [own local]
|
|
||||||
;; (let [rootel (mx/get-ref-dom own "rootel")
|
|
||||||
;; dragel (volatile! nil)]
|
|
||||||
;; (letfn [(on-drag-start [event]
|
|
||||||
;; (println "on-drag-start")
|
|
||||||
;; (js/console.log (.getBrowserEvent event))
|
|
||||||
;; (let [event (.getBrowserEvent event)
|
|
||||||
;; target (.-target event)
|
|
||||||
;; dt (.-dataTransfer event)]
|
|
||||||
;; (vreset! dragel target)
|
|
||||||
;; (set! (.-effectAllowed dt) "move")
|
|
||||||
|
|
||||||
;; (events/listen rootel EventType.DRAGOVER on-drag-over)
|
|
||||||
;; (events/listen rootel EventType.DRAGEND on-drag-end)
|
|
||||||
|
|
||||||
;; (.setData dt "Text" (.-textContent target))
|
|
||||||
;; (defer
|
|
||||||
;; (let [clist (.-classList target)]
|
|
||||||
;; (.add clist "ghost")))))
|
|
||||||
|
|
||||||
;; (on-drag-over [event]
|
|
||||||
;; (dom/prevent-default event)
|
|
||||||
;; (let [event (.getBrowserEvent event)
|
|
||||||
;; dt (.-dataTransfer event)
|
|
||||||
;; target (.-target event)]
|
|
||||||
;; (set! (.-dropEffect dt) "move")
|
|
||||||
;; (println "kaka" (.-nodeName target))
|
|
||||||
;; (when (and target (not= target @dragel))
|
|
||||||
;; (.insertBefore rootel @dragel (or (.-nextSibling target)
|
|
||||||
;; target)))))
|
|
||||||
;; (on-drag-end [event]
|
|
||||||
;; (println "drag end")
|
|
||||||
;; (dom/prevent-default event)
|
|
||||||
|
|
||||||
;; (events/unlisten rootel EventType.DRAGEND on-drag-end)
|
|
||||||
;; (events/unlisten rootel EventType.DRAGOVER on-drag-over)
|
|
||||||
|
|
||||||
;; (let [cl (.-classList @dragel)]
|
|
||||||
;; (.remove cl "ghost")
|
|
||||||
;; (println "on-drag-end")))]
|
|
||||||
;; (assoc own ::key
|
|
||||||
;; (events/listen rootel EventType.DRAGSTART on-drag-start)))))
|
|
||||||
|
|
||||||
|
|
||||||
;; (defn layers-will-unmount
|
|
||||||
;; [own local]
|
|
||||||
;; (let [key (::key own)]
|
|
||||||
;; (events/unlistenByKey key)
|
|
||||||
;; (dissoc own ::key)))
|
|
||||||
|
|
||||||
;; (defn layers-transfer-state
|
|
||||||
;; [old-own own]
|
|
||||||
;; (let [key (::key old-own)]
|
|
||||||
;; (assoc own ::key key)))
|
|
||||||
|
|
||||||
(defn layers-render
|
(defn layers-render
|
||||||
[own]
|
[own]
|
||||||
(let [workspace (rum/react wb/workspace-l)
|
(let [workspace (rum/react wb/workspace-l)
|
||||||
|
|
@ -314,10 +257,7 @@
|
||||||
[:span "Layers"]
|
[:span "Layers"]
|
||||||
[:div.tool-window-close {:on-click close} i/close]]
|
[:div.tool-window-close {:on-click close} i/close]]
|
||||||
[:div.tool-window-content
|
[:div.tool-window-content
|
||||||
[:ul.element-list {;;:onDragStart on-drag-start
|
[:ul.element-list {}
|
||||||
;;:onDragOver on-drag-over
|
|
||||||
;;:onDragEnd on-drag-end
|
|
||||||
:ref "rootel"}
|
|
||||||
(for [shape (map #(get shapes-by-id %) (:shapes page))
|
(for [shape (map #(get shapes-by-id %) (:shapes page))
|
||||||
:let [key (str (:id shape))]]
|
:let [key (str (:id shape))]]
|
||||||
(if (= (:type shape) :builtin/group)
|
(if (= (:type shape) :builtin/group)
|
||||||
|
|
@ -334,9 +274,6 @@
|
||||||
(def ^:static layers-toolbox
|
(def ^:static layers-toolbox
|
||||||
(mx/component
|
(mx/component
|
||||||
{:render layers-render
|
{:render layers-render
|
||||||
;; :did-mount layers-did-mount
|
|
||||||
;; :will-unmount layers-will-unmount
|
|
||||||
;; :transfer-state layers-transfer-state
|
|
||||||
:name "layers"
|
:name "layers"
|
||||||
:mixins [rum/reactive]}))
|
:mixins [rum/reactive]}))
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue