✨ Synchronize gradient colors libraries

common/app/common/pages.cljc

@@ -272,9 +272,6 @@
                            :rx                    :radius-group
                            :ry                    :radius-group})
 
-(def color-sync-attrs [:fill-color
-                       :stroke-color])
-
 (s/def ::minimal-shape
   (s/keys :req-un [::type ::name]
           :opt-un [::id]))

frontend/resources/styles/main/partials/color-bullet.scss

@@ -110,6 +110,10 @@ ul.palette-menu .color-bullet {
   }
 }
 
+.color-data .color-bullet.is-library-color {
+  border-radius: 50%;
+}
+
 .color-data .color-bullet {
   background-color: $color-gray-30;
   border: 1px solid $color-gray-30;

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

@@ -138,7 +138,8 @@
   (ptk/reify ::change-stroke
     ptk/WatchEvent
     (watch [_ state s]
-      (let [objects (get-in state [:workspace-data :pages-index (:current-page-id state) :objects])
+      (let [pid (:current-page-id state)
+            objects (get-in state [:workspace-data :pages-index pid :objects])
             not-frame (fn [shape-id] (not= (get-in objects [shape-id :type]) :frame))
             children (->> ids (filter not-frame) (mapcat #(cph/get-children % objects)))
             ids (into ids children)

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

@@ -458,14 +458,18 @@
     (watch [_ state stream]
       ;; ===== Uncomment this to debug =====
       ;; (js/console.info "##### SYNC-FILE" (str (or file-id "local")))
-      (let [[rchanges1 uchanges1] (dwlh/generate-sync-file :components file-id state)
+      (let [library-changes [(dwlh/generate-sync-library :components file-id state)
-            [rchanges2 uchanges2] (dwlh/generate-sync-library :components file-id state)
+                             (dwlh/generate-sync-library :colors file-id state)
-            [rchanges3 uchanges3] (dwlh/generate-sync-file :colors file-id state)
+                             (dwlh/generate-sync-library :typographies file-id state)]
-            [rchanges4 uchanges4] (dwlh/generate-sync-library :colors file-id state)
+            file-changes    [(dwlh/generate-sync-file :components file-id state)
-            [rchanges5 uchanges5] (dwlh/generate-sync-file :typographies file-id state)
+                             (dwlh/generate-sync-file :colors file-id state)
-            [rchanges6 uchanges6] (dwlh/generate-sync-library :typographies file-id state)
+                             (dwlh/generate-sync-file :typographies file-id state)]
-            rchanges (d/concat rchanges1 rchanges2 rchanges3 rchanges4 rchanges5 rchanges6)
+            rchanges (d/concat []
-            uchanges (d/concat uchanges1 uchanges2 uchanges3 uchanges4 uchanges5 uchanges6)]
+                               (->> library-changes (remove nil?) (map first) (flatten))
+                               (->> file-changes (remove nil?) (map first) (flatten)))
+            uchanges (d/concat []
+                               (->> library-changes (remove nil?) (map second) (flatten))
+                               (->> file-changes (remove nil?) (map second) (flatten)))]
         ;; ===== Uncomment this to debug =====
         ;; (js/console.debug "rchanges" (clj->js rchanges))
         (rx/concat
@@ -476,7 +480,7 @@
             (rp/mutation :update-sync
                          {:file-id (get-in state [:workspace-file :id])
                           :library-id file-id}))
-          (when (or (seq rchanges2) (seq rchanges4) (seq rchanges6))
+          (when (some? library-changes)
             (rx/of (sync-file-2nd-stage file-id))))))))
 
 (defn sync-file-2nd-stage

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

@@ -19,6 +19,15 @@
 
 (defonce empty-changes [[] []])
 
+(defonce color-sync-attrs
+  [[:fill-color-ref-id   :color    :fill-color]
+   [:fill-color-ref-id   :gradient :fill-color-gradient]
+   [:fill-color-ref-id   :opacity  :fill-opacity]
+
+   [:stroke-color-ref-id :color    :stroke-color]
+   [:stroke-color-ref-id :gradient :stroke-color-gradient]
+   [:stroke-color-ref-id :opacity  :stroke-opacity]])
+
 (declare generate-sync-container)
 (declare generate-sync-shape)
 (declare has-asset-reference-fn)
@@ -176,15 +185,17 @@
                        :content
                        ;; Check if any node in the content has a reference for the library
                        (ut/some-node
-                        #(and (some? (:fill-color-ref-id %))
+                        #(or (and (some? (:stroke-color-ref-id %))
-                              (= library-id (:fill-color-ref-file %)))))
+                                  (= library-id (:stroke-color-ref-file %)))
+                             (and (some? (:fill-color-ref-id %))
+                                  (= library-id (:fill-color-ref-file %))))))
                   (some
                    #(let [attr (name %)
                           attr-ref-id (keyword (str attr "-ref-id"))
                           attr-ref-file (keyword (str attr "-ref-file"))]
                       (and (get shape attr-ref-id)
                            (= library-id (get shape attr-ref-file))))
-                   cp/color-sync-attrs)))
+                   (map #(nth % 2) color-sync-attrs))))
 
     :typographies
     (fn [shape]
@@ -238,6 +249,7 @@
       empty-changes
       [rchanges lchanges])))
 
+
 (defmethod generate-sync-shape :colors
   [_ library-id state _ page-id component-id shape]
 
@@ -247,13 +259,16 @@
     (if (= :text (:type shape))
       (let [update-node (fn [node]
                           (if-let [color (get colors (:fill-color-ref-id node))]
-                            (assoc node :fill-color (:value color))
+                            (assoc node
+                                   :fill-color (:color color)
+                                   :fill-opacity (:opacity color)
+                                   :fill-color-gradient (:gradient color))
                             node))]
         (generate-sync-text-shape shape page-id component-id update-node))
-      (loop [attrs (seq cp/color-sync-attrs)
+      (loop [attrs (seq color-sync-attrs)
              roperations []
              uoperations []]
-        (let [attr (first attrs)]
+        (let [[attr-ref-id color-attr attr] (first attrs)]
           (if (nil? attr)
             (if (empty? roperations)
               empty-changes
@@ -268,23 +283,22 @@
                                                :id (:id shape)
                                                :operations uoperations})]]
                 [rchanges uchanges]))
-            (let [attr-ref-id (keyword (str (name attr) "-ref-id"))]
+            (if-not (contains? shape attr-ref-id)
-              (if-not (contains? shape attr-ref-id)
+              (recur (next attrs)
+                     roperations
+                     uoperations)
+              (let [color (get colors (get shape attr-ref-id))
+                    roperation {:type :set
+                                :attr attr
+                                :val (color-attr color)
+                                :ignore-touched true}
+                    uoperation {:type :set
+                                :attr attr
+                                :val (get shape attr)
+                                :ignore-touched true}]
                 (recur (next attrs)
-                       roperations
+                       (conj roperations roperation)
-                       uoperations)
+                       (conj uoperations uoperation))))))))))
-                (let [color (get colors (get shape attr-ref-id))
-                      roperation {:type :set
-                                  :attr attr
-                                  :val (:value color)
-                                  :ignore-touched true}
-                      uoperation {:type :set
-                                  :attr attr
-                                  :val (get shape attr)
-                                  :ignore-touched true}]
-                  (recur (next attrs)
-                         (conj roperations roperation)
-                         (conj uoperations uoperation)))))))))))
 
 (defmethod generate-sync-shape :typographies
   [_ library-id state _ page-id component-id shape]

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -19,7 +19,8 @@
 
     ;; No multiple selection
     (let [color (if (string? color) {:color color :opacity 1} color)]
-      [:div.color-bullet {:on-click #(when on-click (on-click %))}
+      [:div.color-bullet {:class (when (:id color) "is-library-color")
+                          :on-click #(when on-click (on-click %))}
        (when (not (:gradient color))
          [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
 

frontend/src/app/main/ui/workspace/colorpalette.cljs

@@ -50,9 +50,7 @@
 ;; --- Components
 (mf/defc palette-item
   [{:keys [color size local?]}]
-  (let [id (:id color)
+  (let [select-color
-        file-id (:file-id color)
-        select-color
         (fn [event]
           (let [ids (get-in @st/state [:workspace-local :selected])]
             (if (kbd/shift? event)

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -336,7 +336,7 @@
           (let [color (cond-> color
                         (:value color) (assoc :color (:value color) :opacity 1)
                         (:value color) (dissoc :value)
-                        true (assoc :file-id file-id))]
+                        true (assoc :file-id (when (not local?) file-id)))]
             [:& color-item {:key (:id color)
                             :color color
                             :local? local?

frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs

@@ -21,7 +21,12 @@
    [app.util.i18n :as i18n :refer [tr t]]
    [app.util.object :as obj]))
 
-(def fill-attrs [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file :fill-color-gradient])
+(def fill-attrs
+  [:fill-color
+   :fill-opacity
+   :fill-color-ref-id
+   :fill-color-ref-file
+   :fill-color-gradient])
 
 (defn- fill-menu-props-equals?
   [np op]
@@ -33,13 +38,7 @@
         old-values (obj/get op "values")]
     (and (= new-ids old-ids)
          (= new-editor old-editor)
-         (= (:fill-color new-values)
+         (every? #(identical? (% new-values) (% old-values)) fill-attrs))))
-            (:fill-color old-values))
-         (= (:fill-opacity new-values)
-            (:fill-opacity old-values))
-         (= (:fill-color-gradient new-values)
-            (:fill-color-gradient old-values)))))
-
 
 (mf/defc fill-menu
   {::mf/wrap [#(mf/memo' % fill-menu-props-equals?)]}

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -128,7 +128,7 @@
 
     [:div.row-flex.color-data
      [:& cb/color-bullet {:color color
-                       :on-click handle-click-color}]
+                          :on-click handle-click-color}]
 
      (cond
        ;; Rendering a color with ID

frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs

@@ -40,16 +40,7 @@
         new-values (obj/get np "values")
         old-values (obj/get op "values")]
     (and (= new-ids old-ids)
-         (identical? (:stroke-style new-values)
+         (every? #(identical? (% new-values) (% old-values)) stroke-attrs))))
-                     (:stroke-style old-values))
-         (identical? (:stroke-alignment new-values)
-                     (:stroke-alignment old-values))
-         (identical? (:stroke-width new-values)
-                     (:stroke-width old-values))
-         (identical? (:stroke-color new-values)
-                     (:stroke-color old-values))
-         (identical? (:stroke-opacity new-values)
-                     (:stroke-opacity old-values)))))
 
 (defn- width->string [width]
   (if (= width :multiple)