From c9e71539cb885763cabca661987683b948e0b54b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 1 Feb 2016 20:35:55 +0200 Subject: [PATCH] More work on drag and drop of layers. --- src/uxbox/data/workspace.cljs | 84 +++++++++++++------- src/uxbox/ui/workspace/toolboxes/layers.cljs | 71 +---------------- 2 files changed, 60 insertions(+), 95 deletions(-) diff --git a/src/uxbox/data/workspace.cljs b/src/uxbox/data/workspace.cljs index 5349749b6..fa44da984 100644 --- a/src/uxbox/data/workspace.cljs +++ b/src/uxbox/data/workspace.cljs @@ -377,39 +377,67 @@ (rx/from-coll (map unlock-shape (:items shape)))))))) -(defn transfer-after +(defn transfer-shape "Event used in drag and drop for transfer shape from one position to an other." - [sid tid] - (reify - 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)) + [sid tid type] + (letfn [(transfer-to-group [state target]) - fst (remove #(= % sid) fst) - snd (remove #(= % sid) snd) + (transfer-at [index shapes sid] + (let [[fst snd] (split-at index shapes)] + (concat fst [sid] snd))) - items (concat fst [sid] snd)] - (assoc-in state [:pages-by-id (:page titem) :shapes] items))))) + (remove-source [state {:keys [id page group] :as source}] + (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 - [sid tid] - (reify - 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 index (:shapes page)) - fst (remove #(= % sid) fst) - snd (remove #(= % sid) snd) - items (concat fst [sid] snd)] - (assoc-in state [:pages-by-id (:page titem) :shapes] items))))) + (transfer-after [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 (-> (inc (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))))) + + (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) diff --git a/src/uxbox/ui/workspace/toolboxes/layers.cljs b/src/uxbox/ui/workspace/toolboxes/layers.cljs index e362865ef..889041975 100644 --- a/src/uxbox/ui/workspace/toolboxes/layers.cljs +++ b/src/uxbox/ui/workspace/toolboxes/layers.cljs @@ -135,15 +135,15 @@ id (read-string (.getData dt "item/uuid")) over (:over @local)] (case (:over @local) - :top (rs/emit! (dw/transfer-before id (:id item))) - :bottom (rs/emit! (dw/transfer-after id (:id item))) + :top (rs/emit! (dw/transfer-shape id (:id item) :before)) + :bottom (rs/emit! (dw/transfer-shape id (:id item) :after)) ;; :middle (rs/emit! (dw/transfer-inside id (:id item))) ) (swap! local assoc :dragging false :over nil))) (on-drag-over [event] (dom/prevent-default event) (let [dt (.-dataTransfer event) - over (get-hover-position event (:group item))] + over (get-hover-position event false)] (set! (.-dropEffect dt) "move") (swap! local assoc :over over))) (on-drag-enter [event] @@ -239,63 +239,6 @@ :name "layer-group" :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 [own] (let [workspace (rum/react wb/workspace-l) @@ -314,10 +257,7 @@ [:span "Layers"] [:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-content - [:ul.element-list {;;:onDragStart on-drag-start - ;;:onDragOver on-drag-over - ;;:onDragEnd on-drag-end - :ref "rootel"} + [:ul.element-list {} (for [shape (map #(get shapes-by-id %) (:shapes page)) :let [key (str (:id shape))]] (if (= (:type shape) :builtin/group) @@ -334,9 +274,6 @@ (def ^:static layers-toolbox (mx/component {:render layers-render - ;; :did-mount layers-did-mount - ;; :will-unmount layers-will-unmount - ;; :transfer-state layers-transfer-state :name "layers" :mixins [rum/reactive]}))