From 6cb48228422ea17c0beff55974691e849295a914 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 20 May 2020 14:07:59 +0200 Subject: [PATCH] :sparkles: Allow to drop shape inside frames or groups in layers panel --- .../resources/styles/common/framework.scss | 4 +++ frontend/src/uxbox/main/data/workspace.cljs | 18 +++++------ frontend/src/uxbox/main/ui/hooks.cljs | 20 +++++++++---- .../main/ui/workspace/sidebar/layers.cljs | 30 +++++++++++-------- 4 files changed, 45 insertions(+), 27 deletions(-) diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 965a449ec..f4789d026 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -1074,6 +1074,10 @@ input[type=range]:focus::-ms-fill-upper { -webkit-user-drag: element; } +.dnd-over > .element-list-body { + border: 1px solid white !important; +} + .dnd-over-top { border-top: 1px solid white !important; } diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 11962eb43..c9fce37c2 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -918,9 +918,9 @@ ;; TODO: pending UNDO (defn relocate-shape - [id ref-id index] + [id parent-id index] (us/verify ::us/uuid id) - (us/verify ::us/uuid ref-id) + (us/verify ::us/uuid parent-id) (us/verify number? index) (ptk/reify ::relocate-shape @@ -930,15 +930,13 @@ ptk/WatchEvent (watch [_ state stream] (let [page-id (:current-page-id state) - selected (get-in state [:workspace-local :selected]) - objects (get-in state [:workspace-data page-id :objects]) - parent-id (cp/get-parent ref-id objects)] + selected (get-in state [:workspace-local :selected])] (rx/of (dwc/commit-changes [{:type :mov-objects - :parent-id parent-id - :index index - :shapes (vec selected)}] - [] - {:commit-local? true})))))) + :parent-id parent-id + :index index + :shapes (vec selected)}] + [] + {:commit-local? true})))))) ;; --- Change Page Order (D&D Ordering) diff --git a/frontend/src/uxbox/main/ui/hooks.cljs b/frontend/src/uxbox/main/ui/hooks.cljs index ec0927f57..682964183 100644 --- a/frontend/src/uxbox/main/ui/hooks.cljs +++ b/frontend/src/uxbox/main/ui/hooks.cljs @@ -85,8 +85,20 @@ (set! (.-src img) imd) img)) +(defn drop-side + [height ypos detect-center?] + (let [thold (/ height 2) + thold1 (* height 0.2) + thold2 (* height 0.8)] + (if detect-center? + (cond + (< ypos thold1) :top + (> ypos thold2) :bot + :else :center) + (if (> ypos thold) :bot :top)))) + (defn use-sortable - [& {:keys [type data on-drop on-drag] :as opts}] + [& {:keys [type data on-drop on-drag detect-center?] :as opts}] (let [ref (mf/use-ref) state (mf/use-state {}) @@ -115,8 +127,7 @@ dtrans (unchecked-get event "dataTransfer") ypos (unchecked-get event "offsetY") height (unchecked-get target "clientHeight") - thold (/ height 2) - side (if (> ypos thold) :bot :top)] + side (drop-side height ypos detect-center?)] (set! (.-dropEffect dtrans) "move") (set! (.-effectAllowed dtrans) "move") @@ -159,8 +170,7 @@ ypos (unchecked-get event "offsetY") height (unchecked-get target "clientHeight") - thold (/ height 2) - side (if (> ypos thold) :bot :top)] + side (drop-side height ypos detect-center?)] ;; TODO: seems unnecessary (swap! state (fn [state] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 18f7e18c1..af72e287a 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -87,6 +87,7 @@ [{:keys [index item selected objects] :as props}] (let [id (:id item) selected? (contains? selected id) + container? (or (= (:type item) :frame) (= (:type item) :group)) expanded-iref (mf/use-memo (mf/deps id) @@ -149,25 +150,30 @@ (dw/select-shape id)))) on-drop - (fn [side {:keys [id name] :as data}] - (let [index (if (= :top side) (inc index) index)] - (st/emit! (dw/relocate-shape id (:id item) index)))) + (fn [side {:keys [id] :as data}] + (if (= side :center) + (st/emit! (dw/relocate-shape id (:id item) 0)) + (let [index (if (= side :top) (inc index) index) + parent-id (cp/get-parent (:id item) objects)] + (st/emit! (dw/relocate-shape id parent-id index))))) [dprops dref] (hooks/use-sortable :type (str (:frame-id item)) :on-drop on-drop :on-drag on-drag + :detect-center? container? :data {:id (:id item) :index index - :name (:name item)}) - ] + :name (:name item)})] + [:li {:on-context-menu on-context-menu :ref dref :class (dom/classnames - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot) - :selected selected? - )} + :dnd-over (= (:over dprops) :center) + :dnd-over-top (= (:over dprops) :top) + :dnd-over-bot (= (:over dprops) :bot) + :selected selected?)} + [:div.element-list-body {:class (dom/classnames :selected selected? :icon-layer (= (:type item) :icon)) :on-click select-shape @@ -245,15 +251,15 @@ [:ul.element-list (for [[index id] (reverse (d/enumerate (:shapes root)))] (let [obj (get objects id)] - (if (= :frame (:type obj)) + (if (= (:type obj) :frame) [:& frame-wrapper - {:item (get objects id) + {:item obj :selected selected :index index :objects objects :key id}] [:& layer-item - {:item (get objects id) + {:item obj :selected selected :index index :objects objects