✨ Adapt shapes d&d ordering to new data structure.

LICENSE

@@ -35,7 +35,7 @@ Mozilla Public License Version 2.0
     means any form of the work other than Source Code Form.
 
 1.7. "Larger Work"
-    means a work that combines Covered Software with other material, in 
+    means a work that combines Covered Software with other material, in
     a separate file or files, that is not Covered Software.
 
 1.8. "License"

common/uxbox/common/pages.cljc

@@ -119,7 +119,7 @@
 (defmethod operation-spec-impl :set [_]
   (s/keys :req-un [::attr ::val]))
 
-(defmethod operation-spec-impl :mov [_]
+(defmethod operation-spec-impl :order [_]
   (s/keys :req-un [::id ::index]))
 
 (s/def ::operation (s/multi-spec operation-spec-impl :type))
@@ -179,6 +179,9 @@
 (defmulti process-change
   (fn [data change] (:type change)))
 
+(defmulti process-operation
+  (fn [_ op] (:type op)))
+
 (defn process-changes
   [data items]
   (->> (us/verify ::changes items)
@@ -205,24 +208,11 @@
                        (let [[before after] (split-at index shapes)]
                          (d/concat [] before [id] after))))))))
 
-(defn- process-obj-operation
-  [shape op]
-  (case (:type op)
-    :set
-    (let [attr (:attr op)
-          val  (:val op)]
-      (if (nil? val)
-        (dissoc shape attr)
-        (assoc shape attr val)))
-
-    (ex/raise :type :not-implemented
-              :hint "TODO")))
-
 (defmethod process-change :mod-obj
   [data {:keys [id operations] :as change}]
   (assert (contains? (:objects data) id) "process-change/mod-obj")
   (update-in data [:objects id]
-             #(reduce process-obj-operation % operations)))
+             #(reduce process-operation % operations)))
 
 (defmethod process-change :mov-obj
   [data {:keys [id frame-id] :as change}]
@@ -242,102 +232,26 @@
         (update-in [:objects frame-id :shapes]
                    (fn [s] (filterv #(not= % id) s))))))
 
-;; (defn- process-change
-;;   [data {:keys [type] :as change}]
-;;   (case type
-;;     :add-obj (process-add-obj data change)
-;;     :mod-obj (process-mod-obj data change)
+(defmethod process-operation :set
+  [shape op]
+  (let [attr (:attr op)
+        val  (:val op)]
+    (if (nil? val)
+      (dissoc shape attr)
+      (assoc shape attr val))))
 
-;;     ;; :add-shape (process-add-shape data change)
-;;     ;; :add-canvas (process-add-canvas data change)
-;;     ;; :mod-shape (process-mod-shape data change)
-;;     ;; :mov-shape (process-mov-shape data change)
-;;     ;; :del-shape (process-del-shape data change)
-;;     ;; :del-canvas (process-del-canvas data change)
-;;     ;; :mod-opts (process-mod-opts data change)
-;;     ))
+(defmethod process-operation :order
+  [obj {:keys [id index]}]
+  (prn "process-operation" :order obj)
+  (assert (vector? (:shapes obj)) ":shapes should be a vector")
+  (update obj :shapes (fn [items]
+                        (let [[b a] (->> (remove #(= % id) items)
+                                         (split-at index))]
+                          (vec (concat b [id] a))))))
 
-;; (defn- process-add-obj
+(defmethod process-operation :default
+  [shape op]
+  (ex/raise :type :operation-not-implemented
+            :context {:type (:type op)}))
 
 
-;; (defn- process-add-shape
-;;   [data {:keys [id index shape] :as change}]
-;;   (-> data
-;;       (update :shapes (fn [shapes]
-;;                         (cond
-;;                           (some #{id} shapes)
-;;                           shapes
-
-;;                           (nil? index)
-;;                           (conj shapes id)
-
-;;                           :else
-;;                           (let [[before after] (split-at index shapes)]
-;;                             (d/concat [] before [id] after)))))
-;;       (update :shapes-by-id assoc id shape)))
-
-;; (defn- process-add-canvas
-;;   [data {:keys [id shape index] :as change}]
-;;   (-> data
-;;       (update :canvas (fn [shapes]
-;;                         (cond
-;;                           (some #{id} shapes)
-;;                           shapes
-
-;;                           (nil? index)
-;;                           (conj shapes id)
-
-;;                           :else
-;;                           (let [[before after] (split-at index shapes)]
-;;                             (d/concat [] before [id] after)))))
-
-;;       (update :shapes-by-id assoc id shape)))
-
-;; (defn- process-mod-shape
-;;   [data {:keys [id operations] :as change}]
-;;   (if (get-in data [:shapes-by-id id])
-;;     (update-in data [:shapes-by-id id]
-;;                #(reduce (fn [shape [_ att val]]
-;;                           (if (nil? val)
-;;                             (dissoc shape att)
-;;                             (assoc shape att val)))
-;;                         % operations))
-;;     data))
-
-;; (defn- process-mod-opts
-;;   [data {:keys [operations]}]
-;;   (update data :options
-;;           #(reduce (fn [options [_ att val]]
-;;                      (if (nil? val)
-;;                        (dissoc options att)
-;;                        (assoc options att val)))
-;;                    % operations)))
-
-;; (defn- process-mov-shape
-;;   [data {:keys [id index]}]
-;;   (let [shapes (:shapes data)
-;;         current-index (d/index-of shapes id)
-;;         shapes' (into [] (remove #(= % id) shapes))]
-;;     (cond
-;;       (= index current-index)
-;;       data
-
-;;       (nil? current-index)
-;;       (assoc data :shapes (d/concat [id] shapes'))
-
-;;       :else
-;;       (let [[before after] (split-at index shapes')]
-;;         (assoc data :shapes (d/concat [] before [id] after))))))
-
-;; (defn- process-del-shape
-;;   [data {:keys [id] :as change}]
-;;   (-> data
-;;       (update :shapes (fn [s] (filterv #(not= % id) s)))
-;;       (update :shapes-by-id dissoc id)))
-
-;; (defn- process-del-canvas
-;;   [data {:keys [id] :as change}]
-;;   (-> data
-;;       (update :canvas (fn [s] (filterv #(not= % id) s)))
-;;       (update :shapes-by-id dissoc id)))
-

frontend/src/uxbox/main/data/workspace.cljs

@@ -981,6 +981,7 @@
    :stroke-opacity 1
    :frame-id uuid/zero
    :fill-color "#ffffff"
+   :shapes []
    :fill-opacity 1})
 
 (defn add-frame
@@ -1376,23 +1377,28 @@
   (ptk/reify ::commit-shape-order-change
     ptk/WatchEvent
     (watch [_ state stream]
-      (let [page-id (get-in state [:workspace-page :id])
-            curr-shapes (get-in state [:workspace-data :shapes])
-            prev-shapes (get-in state [:pages-data page-id :shapes])
 
-            curr-index (d/index-of curr-shapes id)
-            prev-index (d/index-of prev-shapes id)
+      (let [obj (get-in state [:workspace-data :objects id])
+            pid (get-in state [:workspace-page :id])
+
+            cfrm (get-in state [:workspace-data :objects (:frame-id obj)])
+            pfrm (get-in state [:pages-data pid :objects (:frame-id obj)])
+
+            cindex (d/index-of (:shapes cfrm) id)
+            pindex (d/index-of (:shapes pfrm) id)
+
             session-id (:session-id state)
 
-            change {:type :mov-shape
-                    :session-id session-id
-                    :id id
-                    :index curr-index}
-            uchange {:type :mov-shape
-                    :session-id session-id
-                     :id id
-                     :index prev-index}]
-        (rx/of (commit-changes [change] [uchange]))))))
+            rchange {:type :mod-obj
+                     :session-id session-id
+                     :id (:id cfrm)
+                     :operations [{:type :order :id id :index cindex}]}
+            uchange {:type :mod-obj
+                     :session-id session-id
+                     :id (:id cfrm)
+                     :operations [{:type :order :id id :index pindex}]}]
+        (prn "commit-shape-order-change3" rchange)
+        (rx/of (commit-changes [rchange] [uchange]))))))
 
 ;; --- Change Frame Order (D&D Ordering)
 
@@ -1400,7 +1406,7 @@
   [{:keys [id index] :as params}]
   (us/verify ::us/uuid id)
   (us/verify ::us/number index)
-  (ptk/reify ::change-frame-order
+  #_(ptk/reify ::change-frame-order
     ptk/UpdateEvent
     (update [_ state]
       (let [shapes (get-in state [:workspace-data :frame])
@@ -1458,14 +1464,11 @@
       ptk/WatchEvent
       (watch [_ state stream]
         (let [[rch uch] (impl-diff state)]
-          ;; (prn "rehash-shape-frame-relationship" rch)
-          ;; (prn "rehash-shape-frame-relationship" uch)
           (when-not (empty? rch)
             (rx/of (commit-changes rch uch {:commit-local? true}))))))))
 
 (defn assoc-resize-modifier-in-bulk
   [ids xfmt]
-  ;; (prn "assoc-resize-modifier-in-bulk" ids)
   (us/verify ::set-of-uuid ids)
   (us/verify gmt/matrix? xfmt)
   (ptk/reify ::assoc-resize-modifier-in-bulk
@@ -1484,14 +1487,10 @@
     (ptk/reify ::materialize-resize-modifier-in-bulk
       ptk/UpdateEvent
       (update [_ state]
-
-        ;; (prn "materialize-resize-modifier-in-bulk$update" ids)
-
         (reduce process-shape state ids))
 
       ptk/WatchEvent
       (watch [_ state stream]
-        ;; (prn "materialize-resize-modifier-in-bulk$watch" ids)
         (rx/of diff-and-commit-changes
                (rehash-shape-frame-relationship ids))))))
 

frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs

@@ -120,15 +120,15 @@
 
         on-drop
         (fn [item monitor]
-          #_(st/emit! (dw/commit-shape-order-change (:shape-id item))))
+          (st/emit! (dw/commit-shape-order-change (:obj-id item))))
 
         on-hover
         (fn [item monitor]
-          (st/emit! (dw/shape-order-change (:shape-id item) index)))
+          (st/emit! (dw/shape-order-change (:obj-id item) index)))
 
         [dprops dnd-ref] (use-sortable
-                          {:type "layer-item"
-                           :data {:shape-id (:id item)
+                          {:type (str "layer-item" (:frame-id item))
+                           :data {:obj-id (:id item)
                                   :page-id (:page item)
                                   :index index}
                            :on-hover on-hover
@@ -197,16 +197,15 @@
 
         on-drop
         (fn [item monitor]
-          (st/emit! ::dw/page-data-update))
+          (st/emit! (dw/commit-shape-order-change (:obj-id item))))
 
         on-hover
         (fn [item monitor]
-          (st/emit! (dw/change-frame-order {:id (:frame-id item)
-                                             :index index})))
+          (st/emit! (dw/shape-order-change (:obj-id item) index)))
 
         [dprops dnd-ref] (use-sortable
-                          {:type "frame-item"
-                           :data {:frame-id (:id item)
+                          {:type (str "layer-item" (:frame-id item))
+                           :data {:obj-id (:id item)
                                   :page-id (:page item)
                                   :index index}
                            :on-hover on-hover

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -151,7 +151,7 @@
         shapes  (->> (:shapes root)
                      (map #(get objects %)))]
     [:g.shapes
-     (for [item shapes]
+     (for [item (reverse shapes)]
        (if (= (:type item) :frame)
          [:& frame-wrapper {:shape item
                             :key (:id item)