Merge pull request #221 from uxbox/331/drop-element-into-artboard

✨ Allow to drop shape inside frames or groups in layers panel

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;
 }

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)
 

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]

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