Merge pull request #391 from penpot/737/add-or-remove-shapes-to-components

✨ Synchronize add/delete/move shapes in componentes

backend/src/app/services/mutations/files.clj

@@ -251,7 +251,8 @@
          :add-media :mod-media :del-media
          :add-component :mod-component :del-component
          :add-typography :mod-typography :del-typography} (:type change))
-      (and (= (:type change) :mod-obj)
+      (and (#{:add-obj :mod-obj :del-obj
+              :reg-objects :mov-objects} (:type change))
            (some? (:component-id change)))))
 
 (declare update-file)

common/app/common/pages.cljc

@@ -340,6 +340,7 @@
                            :rx                    :radius-group
                            :ry                    :radius-group
                            :masked-group?         :mask-group})
+                           ;; shapes-group is handled differently
 
 (s/def ::minimal-shape
   (s/keys :req-un [::type ::name]
@@ -435,6 +436,14 @@
                    :internal.file/recent-colors
                    :internal.file/media]))
 
+(s/def :internal.container/type #{:page :component})
+
+(s/def ::container
+  (s/keys :req-un [:internal.container/type
+                   ::id
+                   ::name
+                   :internal.page/objects]))
+
 (defmulti operation-spec :type)
 
 (s/def :internal.operations.set/attr keyword?)
@@ -460,29 +469,52 @@
 
 (s/def :internal.changes.add-obj/obj ::shape)
 
+(defn- valid-container-id-frame?
+  [o]
+  (or (and (contains? o :page-id)
+           (not (contains? o :component-id))
+           (some? (:frame-id o)))
+      (and (contains? o :component-id)
+           (not (contains? o :page-id))
+           (nil? (:frame-id o)))))
+
+(defn- valid-container-id?
+  [o]
+  (or (and (contains? o :page-id)
+           (not (contains? o :component-id)))
+      (and (contains? o :component-id)
+           (not (contains? o :page-id)))))
+
 (defmethod change-spec :add-obj [_]
-  (s/keys :req-un [::id ::page-id ::frame-id
+  (s/and (s/keys :req-un [::id :internal.changes.add-obj/obj]
-                   :internal.changes.add-obj/obj]
+                 :opt-un [::page-id ::component-id ::parent-id ::frame-id])
-          :opt-un [::parent-id]))
+         valid-container-id-frame?))
 
 (s/def ::operation (s/multi-spec operation-spec :type))
 (s/def ::operations (s/coll-of ::operation))
 
 (defmethod change-spec :mod-obj [_]
-  (s/keys :req-un [::id (or ::page-id ::component-id) ::operations]))
+  (s/and (s/keys :req-un [::id ::operations]
+                 :opt-un [::page-id ::component-id])
+         valid-container-id?))
 
 (defmethod change-spec :del-obj [_]
-  (s/keys :req-un [::id ::page-id]))
+  (s/and (s/keys :req-un [::id]
+                 :opt-un [::page-id ::component-id])
+         valid-container-id?))
 
 (s/def :internal.changes.reg-objects/shapes
   (s/coll-of uuid? :kind vector?))
 
 (defmethod change-spec :reg-objects [_]
-  (s/keys :req-un [::page-id :internal.changes.reg-objects/shapes]))
+  (s/and (s/keys :req-un [:internal.changes.reg-objects/shapes]
+                 :opt-un [::page-id ::component-id])
+         valid-container-id?))
 
 (defmethod change-spec :mov-objects [_]
-  (s/keys :req-un [::page-id ::parent-id :internal.shape/shapes]
+  (s/and (s/keys :req-un [::parent-id :internal.shape/shapes]
-          :opt-un [::index]))
+                 :opt-un [::page-id ::component-id ::index])
+         valid-container-id?))
 
 (defmethod change-spec :add-page [_]
   (s/or :empty (s/keys :req-un [::id ::name])
@@ -701,26 +733,33 @@
                           (assoc data :options (d/dissoc-in (:options data) path)))))))
 
 (defmethod process-change :add-obj
-  [data {:keys [id obj page-id frame-id parent-id index] :as change}]
+  [data {:keys [id obj page-id component-id frame-id parent-id
-  (d/update-in-when data [:pages-index page-id]
+                index ignore-touched] :as change}]
-                    (fn [data]
+  (let [update-fn (fn [data]
-                      (let [parent-id (or parent-id frame-id)
+                    (let [parent-id (or parent-id frame-id)
-                            objects (:objects data)]
+                          objects (:objects data)]
-                        (when (and (contains? objects parent-id)
+                      (let [obj (assoc obj
-                                   (contains? objects frame-id))
+                                       :frame-id frame-id
-                          (let [obj (assoc obj
+                                       :parent-id parent-id
-                                           :frame-id frame-id
+                                       :id id)]
-                                           :parent-id parent-id
+                        (-> data
-                                           :id id)]
+                            (update :objects assoc id obj)
-                            (-> data
+                            (update-in [:objects parent-id :shapes]
-                                (update :objects assoc id obj)
+                                       (fn [shapes]
-                                (update-in [:objects parent-id :shapes]
+                                         (let [shapes (or shapes [])]
-                                           (fn [shapes]
+                                           (cond
-                                             (let [shapes (or shapes [])]
+                                             (some #{id} shapes) shapes
-                                               (cond
+                                             (nil? index) (conj shapes id)
-                                                 (some #{id} shapes) shapes
+                                             :else (cph/insert-at-index shapes index [id])))))
-                                                 (nil? index) (conj shapes id)
+                            (cond->
-                                                 :else (cph/insert-at-index shapes index [id]))))))))))))
+                              (and (:shape-ref (get-in data [:objects parent-id]))
+                                   (not= parent-id frame-id)
+                                   (not ignore-touched))
+                              (update-in [:objects parent-id :touched]
+                                         cph/set-touched-group :shapes-group))))))]
+    (if page-id
+      (d/update-in-when data [:pages-index page-id] update-fn)
+      (d/update-in-when data [:components component-id] update-fn))))
 
 (defmethod process-change :mod-obj
   [data {:keys [id page-id component-id operations] :as change}]
@@ -733,8 +772,8 @@
       (d/update-in-when data [:components component-id :objects] update-fn))))
 
 (defmethod process-change :del-obj
-  [data {:keys [page-id id] :as change}]
+  [data {:keys [page-id component-id id ignore-touched] :as change}]
-  (letfn [(delete-object [objects id]
+  (letfn [(delete-object [objects]
             (if-let [target (get objects id)]
               (let [parent-id (cph/get-parent id objects)
                     frame-id  (:frame-id target)
@@ -745,6 +784,9 @@
                        (= :group (:type parent)))
                   (update-in [parent-id :shapes] (fn [s] (filterv #(not= % id) s)))
 
+                  (and (:shape-ref parent) (not ignore-touched))
+                  (update-in [parent-id :touched] cph/set-touched-group :shapes-group)
+
                   (contains? objects frame-id)
                   (update-in [frame-id :shapes] (fn [s] (filterv #(not= % id) s)))
 
@@ -752,7 +794,9 @@
                                            ; dependend objects
                   (as-> $ (reduce delete-object $ (:shapes target)))))
               objects))]
-    (d/update-in-when data [:pages-index page-id :objects] delete-object id)))
+    (if page-id
+      (d/update-in-when data [:pages-index page-id :objects] delete-object)
+      (d/update-in-when data [:components component-id :objects] delete-object))))
 
 (defn rotation-modifiers
   [center shape angle]
@@ -765,7 +809,7 @@
 
 ;; reg-objects operation "regenerates" the values for the parent groups
 (defmethod process-change :reg-objects
-  [data {:keys [page-id shapes]}]
+  [data {:keys [page-id component-id shapes]}]
   (letfn [(reg-objects [objects]
             (reduce #(update %1 %2 update-group %1) objects
                     (sequence (comp
@@ -797,10 +841,12 @@
                   (assoc-in [:modifiers :rotation] (:rotation group 0))
                   (geom/transform-shape))))]
 
-    (d/update-in-when data [:pages-index page-id :objects] reg-objects)))
+    (if page-id
+      (d/update-in-when data [:pages-index page-id :objects] reg-objects)
+      (d/update-in-when data [:components component-id :objects] reg-objects))))
 
 (defmethod process-change :mov-objects
-  [data {:keys [parent-id shapes index page-id] :as change}]
+  [data {:keys [parent-id shapes index page-id component-id ignore-touched] :as change}]
   (letfn [(is-valid-move? [objects shape-id]
             (let [invalid-targets (cph/calculate-invalid-targets shape-id objects)]
               (and (not (invalid-targets parent-id))
@@ -827,6 +873,14 @@
           (strip-id [coll id]
             (filterv #(not= % id) coll))
 
+          (add-to-parent [parent index shapes]
+            (cond-> parent
+              true
+              (update :shapes check-insert-items parent index shapes)
+
+              (and (:shape-ref parent) (= (:type parent) :group) (not ignore-touched))
+              (update :touched cph/set-touched-group :shapes-group)))
+
           (remove-from-old-parent [cpindex objects shape-id]
             (let [prev-parent-id (get cpindex shape-id)]
               ;; Do nothing if the parent id of the shape is the same as
@@ -843,7 +897,15 @@
                       (recur pid
                              (:parent-id obj)
                              (dissoc objects pid))
-                      (update-in objects [pid :shapes] strip-id sid)))))))
+                      (cond-> objects
+                        true
+                        (update-in [pid :shapes] strip-id sid)
+
+                        (and (:shape-ref obj)
+                             (= (:type obj) :group)
+                             (not ignore-touched))
+                        (update-in [pid :touched]
+                                   cph/set-touched-group :shapes-group))))))))
 
           (update-parent-id [objects id]
             (update objects id assoc :parent-id parent-id))
@@ -875,13 +937,15 @@
 
               (if valid?
                 (as-> objects $
-                  (update-in $ [parent-id :shapes] check-insert-items parent index shapes)
+                  (update $ parent-id #(add-to-parent % index shapes))
                   (reduce update-parent-id $ shapes)
                   (reduce (partial remove-from-old-parent cpindex) $ shapes)
                   (reduce (partial update-frame-ids frm-id) $ (get-in $ [parent-id :shapes])))
                 objects)))]
 
-    (d/update-in-when data [:pages-index page-id :objects] move-objects)))
+    (if page-id
+      (d/update-in-when data [:pages-index page-id :objects] move-objects)
+      (d/update-in-when data [:components component-id :objects] move-objects))))
 
 (defmethod process-change :add-page
   [data {:keys [id name page]}]
@@ -1001,7 +1065,7 @@
 
     (cond-> shape
       (and shape-ref group (not ignore) (not= val (get shape attr)))
-      (update :touched #(conj (or % #{}) group))
+      (update :touched cph/set-touched-group group)
 
       (nil? val)
       (dissoc attr)

common/app/common/pages_helpers.cljc

@@ -42,11 +42,26 @@
                       objects)
       nil)))
 
+(defn make-container
+  [page-or-component type]
+  (assoc page-or-component
+         :type type))
+
+(defn page?
+  [container]
+  (assert (some? (:type container)))
+  (= (:type container) :page))
+
+(defn component?
+  [container]
+  (= (:type container) :component))
+
 (defn get-container
-  [page-id component-id local-file]
+  [id type local-file]
-  (if (some? page-id)
+  (-> (if (= type :page)
-    (get-in local-file [:pages-index page-id])
+        (get-in local-file [:pages-index id])
-    (get-in local-file [:components component-id])))
+        (get-in local-file [:components id]))
+      (assoc :type type)))
 
 (defn get-shape
   [container shape-id]
@@ -59,6 +74,12 @@
                (get-in libraries [file-id :data]))]
     (get-in file [:components component-id])))
 
+(defn is-master-of
+  [shape-master shape-inst]
+  (and (:shape-ref shape-inst)
+       (or (= (:shape-ref shape-inst) (:id shape-master))
+           (= (:shape-ref shape-inst) (:shape-ref shape-master)))))
+
 (defn get-component-root
   [component]
   (get-in component [:objects (:id component)]))
@@ -75,12 +96,12 @@
 (defn get-children-objects
   "Retrieve all children objects recursively for a given object"
   [id objects]
-  (map #(get objects %) (get-children id objects)))
+  (mapv #(get objects %) (get-children id objects)))
 
 (defn get-object-with-children
-  "Retrieve a list with an object and all of its children"
+  "Retrieve a vector with an object and all of its children"
   [id objects]
-  (map #(get objects %) (cons id (get-children id objects))))
+  (mapv #(get objects %) (cons id (get-children id objects))))
 
 (defn is-shape-grouped
   "Checks if a shape is inside a group"
@@ -210,17 +231,17 @@
                                    :parent-id parent-id)
 
                             (some? (:shapes object))
-                            (assoc :shapes (map :id new-direct-children)))
+                            (assoc :shapes (mapv :id new-direct-children)))
 
                new-object (update-new-object new-object object)
 
-               new-objects (concat [new-object] new-children)
+               new-objects (d/concat [new-object] new-children)
 
                updated-object (update-original-object object new-object)
 
                updated-objects (if (identical? object updated-object)
                                  updated-children
-                                 (concat [updated-object] updated-children))]
+                                 (d/concat [updated-object] updated-children))]
 
            [new-object new-objects updated-objects])
 
@@ -232,9 +253,9 @@
 
            (recur
              (next child-ids)
-             (concat new-direct-children [new-child])
+             (d/concat new-direct-children [new-child])
-             (concat new-children new-child-objects)
+             (d/concat new-children new-child-objects)
-             (concat updated-children updated-child-objects))))))))
+             (d/concat updated-children updated-child-objects))))))))
 
 
 (defn indexed-shapes
@@ -277,3 +298,12 @@
           (d/seek #(gsh/has-point? % position))
           :id)
      uuid/zero)))
+
+(defn set-touched-group
+  [touched group]
+  (conj (or touched #{}) group))
+
+(defn touched-group?
+  [shape group]
+  ((or (:touched shape) #{}) group))
+

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

@@ -711,6 +711,7 @@
               (reduce (fn [res id]
                         (let [children    (cph/get-children id objects)
                               parents     (cph/get-parents id objects)
+                              parent      (get objects (first parents))
                               add-change  (fn [id]
                                             (let [item (get objects id)]
                                               {:type :add-obj
@@ -726,7 +727,13 @@
                                     (map add-change children)
                                     [{:type :reg-objects
                                       :page-id page-id
-                                      :shapes (vec parents)}])))
+                                      :shapes (vec parents)}]
+                                    (when (some? parent)
+                                      [{:type :mod-obj
+                                        :page-id page-id
+                                        :id (:id parent)
+                                        :operations [{:type :set-touched
+                                                      :touched (:touched parent)}]}]))))
                       []
                       ids)
               (map #(array-map

frontend/src/app/main/data/workspace/libraries.cljs

@@ -32,6 +32,7 @@
    [cljs.spec.alpha :as s]
    [potok.core :as ptk]))
 
+;; Change this to :info :debug or :trace to debug this module
 (log/set-level! :warn)
 
 (declare sync-file)
@@ -397,13 +398,15 @@
                              :page-id page-id
                              :frame-id (:frame-id obj)
                              :parent-id (:parent-id obj)
+                             :ignore-touched true
                              :obj obj})
                           new-shapes)
 
             uchanges (map (fn [obj]
                             {:type :del-obj
                              :id (:id obj)
-                             :page-id page-id})
+                             :page-id page-id
+                             :ignore-touched true})
                           new-shapes)]
 
         (rx/of (dwc/commit-changes rchanges uchanges {:commit-local? true})
@@ -493,16 +496,18 @@
   (ptk/reify ::reset-component
     ptk/WatchEvent
     (watch [_ state stream]
-      ;; ===== Uncomment this to debug =====
       (log/info :msg "RESET-COMPONENT of shape" :id (str id))
-      (let [[rchanges uchanges]
+      (let [local-file (get state :workspace-data)
-            (dwlh/generate-sync-shape-and-children-components (get state :current-page-id)
+            libraries  (get state :workspace-libraries)
-                                                              nil
+            container  (cph/get-container (get state :current-page-id)
-                                                              id
+                                          :page
-                                                              (get state :workspace-data)
+                                          local-file)
-                                                              (get state :workspace-libraries)
+            [rchanges uchanges]
-                                                              true)]
+            (dwlh/generate-sync-shape-direct container
-        ;; ===== Uncomment this to debug =====
+                                             id
+                                             local-file
+                                             libraries
+                                             true)]
         (log/debug :msg "RESET-COMPONENT finished" :js/rchanges rchanges)
 
         (rx/of (dwc/commit-changes rchanges uchanges {:commit-local? true}))))))
@@ -516,7 +521,6 @@
   (ptk/reify ::update-component
     ptk/WatchEvent
     (watch [_ state stream]
-      ;; ===== Uncomment this to debug =====
       (log/info :msg "UPDATE-COMPONENT of shape" :id (str id))
       (let [page-id (:current-page-id state)
             objects (dwc/lookup-page-objects state page-id)
@@ -529,7 +533,6 @@
                                               (get state :workspace-data)
                                               (get state :workspace-libraries))]
 
-        ;; ===== Uncomment this to debug =====
         (log/debug :msg "UPDATE-COMPONENT finished" :js/rchanges rchanges)
 
         (rx/of (dwc/commit-changes rchanges uchanges {:commit-local? true}))))))
@@ -552,7 +555,6 @@
 
     ptk/WatchEvent
     (watch [_ state stream]
-      ;; ===== Uncomment this to debug =====
       (log/info :msg "SYNC-FILE" :file (str (or file-id "local")))
       (let [library-changes [(dwlh/generate-sync-library :components file-id state)
                              (dwlh/generate-sync-library :colors file-id state)
@@ -566,7 +568,6 @@
             uchanges (d/concat []
                                (->> library-changes (remove nil?) (map second) (flatten))
                                (->> file-changes (remove nil?) (map second) (flatten)))]
-        ;; ===== Uncomment this to debug =====
         (log/debug :msg "SYNC-FILE finished" :js/rchanges rchanges)
         (rx/concat
           (rx/of (dm/hide-tag :sync-dialog))
@@ -593,14 +594,12 @@
   (ptk/reify ::sync-file-2nd-stage
     ptk/WatchEvent
     (watch [_ state stream]
-      ;; ===== Uncomment this to debug =====
       (log/info :msg "SYNC-FILE (2nd stage)" :file (str (or file-id "local")))
       (let [[rchanges1 uchanges1] (dwlh/generate-sync-file :components nil state)
             [rchanges2 uchanges2] (dwlh/generate-sync-library :components file-id state)
             rchanges (d/concat rchanges1 rchanges2)
             uchanges (d/concat uchanges1 uchanges2)]
         (when rchanges
-          ;; ===== Uncomment this to debug =====
           (log/debug :msg "SYNC-FILE (2nd stage) finished" :js/rchanges rchanges)
           (rx/of (dwc/commit-changes rchanges uchanges {:commit-local? true})))))))
 

frontend/src/app/main/data/workspace/selection.cljs

@@ -330,6 +330,7 @@
             :old-id (:id obj)
             :frame-id frame-id
             :parent-id parent-id
+            :ignore-touched true
             :obj (dissoc reframed-obj :shapes)}]
           children-changes)))