✨ Integration with library new colors

common/app/common/pages.cljc

@@ -869,7 +869,7 @@
 
 (defmethod process-change :mod-color
   [data {:keys [color]}]
-  (d/update-in-when data [:colors (:id color)] merge color))
+  (d/assoc-in-when data [:colors (:id color)] color))
 
 (defmethod process-change :del-color
   [data {:keys [id]}]
@@ -965,3 +965,4 @@
   (ex/raise :type :not-implemented
             :code :operation-not-implemented
             :context {:type (:type op)}))
+

frontend/resources/images/icons/picker-ramp.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" height="500" width="500"><path d="M24.7-.203C11.421-.203.001 11.217.001 24.494v451.012c0 13.277 11.417 24.695 24.691 24.697h450.608c13.28 0 24.697-11.42 24.697-24.697V24.494c0-13.276-11.42-24.697-24.697-24.697H24.699zm4.142 31.35h442.316v437.707H28.842V31.146z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <path d="M24.7-.203C11.421-.203.001 11.217.001 24.494v451.012c0 13.277 11.417 24.695 24.691 24.697H475.3c13.28 0 24.697-11.42 24.697-24.697V24.494c0-13.276-11.42-24.697-24.697-24.697H24.699zm12.142 39.35h426.316v421.707H36.842V39.146z"/>
+</svg>

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

@@ -68,7 +68,6 @@ ul.palette-menu .color-bullet {
   grid-area: color;
   width: 20px;
   height: 20px;
-  background-color: rgba(var(--color));
   border-radius: 12px;
   border: 1px solid $color-gray-10;
   background-size: 8px;
@@ -95,6 +94,7 @@ ul.palette-menu .color-bullet {
   overflow: hidden;
 
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+  background-color: $color-white;
 
   & > * {
     width: 100%;

frontend/resources/styles/main/partials/colorpicker.scss

@@ -443,13 +443,10 @@
 
   .colorpicker-tabs {
     display: flex;
-    margin-top: 0.25rem;
+    margin: 0.5rem 0;
+    border-radius: 5px;
+    border: 1px solid $color-gray-10;
     height: 2rem;
-    background-color: $color-gray-10;
-
-    .active {
-      background-color: $color-white;
-    }
 
     .colorpicker-tab {
       cursor: pointer;
@@ -461,9 +458,21 @@
       svg {
         width: 16px;
         height: 16px;
-        fill: $color-gray-30;
+        fill: $color-gray-20;
       }
     }
+
+    .active {
+      background-color: $color-gray-10;
+      svg {
+        fill: $color-gray-60;
+      }
+    }
+
+    :hover svg {
+      fill: $color-primary;
+    }
+
   }
 }
 

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

@@ -36,7 +36,12 @@
 (defn add-color
   [color]
   (let [id   (uuid/next)
-        color (assoc color :id id)]
+        color (assoc color
+                     :id id
+                     :name (or (:color color)
+                               (case (get-in color [:gradient :type])
+                                 :linear "Linear gradient"
+                                 :radial "Radial gradient")))]
     (us/assert ::cp/color color)
     (ptk/reify ::add-color
       ptk/WatchEvent

frontend/src/app/main/ui/shapes/attrs.cljs

@@ -25,7 +25,7 @@
                          :ry (:ry shape)}))
 
 (defn add-fill [attrs shape]
-  (let [fill-color-gradient-id (str "fill-color-gradient_" (:id shape))]
+  (let [fill-color-gradient-id (str "fill-color-gradient_" (:render-id shape))]
     (if (:fill-color-gradient shape)
       (obj/merge! attrs #js {:fill (str/format "url(#%s)" fill-color-gradient-id)})
       (obj/merge! attrs #js {:fill (or (:fill-color shape) "transparent")
@@ -33,7 +33,7 @@
 
 (defn add-stroke [attrs shape]
   (let [stroke-style (:stroke-style shape :none)
-        stroke-color-gradient-id (str "stroke-color-gradient_" (:id shape))]
+        stroke-color-gradient-id (str "stroke-color-gradient_" (:render-id shape))]
     (if (not= stroke-style :none)
       (if (:stroke-color-gradient shape)
         (obj/merge! attrs

frontend/src/app/main/ui/shapes/gradients.cljs

@@ -49,8 +49,8 @@
            scale-factor-x (* scale-factor-y (:width gradient))
 
            scale-vec (gpt/point (* scale-factor-y (/ height 2))
-                                (* scale-factor-x (/ width 2))
-                                ) 
+                                (* scale-factor-x (/ width 2)))
+
            tr-translate (str/fmt "translate(%s, %s)" (:x translate-vec) (:y translate-vec))
            tr-rotate (str/fmt "rotate(%s)" angle)
            tr-scale (str/fmt "scale(%s, %s)" (:x scale-vec) (:y scale-vec))
@@ -72,8 +72,9 @@
   [props]
   (let [attr (obj/get props "attr")
         shape (obj/get props "shape")
+        render-id (obj/get props "render-id")
 
-        id (str (name attr) "_" (:id shape))
+        id (str (name attr) "_" render-id)
         gradient (get shape attr)
         gradient-props #js {:id id
                             :gradient gradient

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

@@ -306,16 +306,15 @@
                         :on-change handle-change-color}]
 
       [:& libraries {:current-color current-color
-                     :on-select-color on-select-library-color}]]
+                     :on-select-color on-select-library-color}]
 
-     (when on-accept
-       [:div.actions
-        [:button.btn-primary.btn-large
-         {:on-click (fn []
-                      ;; TODO: REVIEW FOR GRADIENTS
-                      #_(on-accept @value-ref)
-                      (modal/hide!))}
-         (t locale "workspace.libraries.colors.save-color")]])])
+      (when on-accept
+        [:div.actions
+         [:button.btn-primary.btn-large
+          {:on-click (fn []
+                       (on-accept (state->data @state))
+                       (modal/hide!))}
+          (t locale "workspace.libraries.colors.save-color")]])]])
   )
 
 (defn calculate-position

frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs

@@ -25,9 +25,9 @@
    [app.main.data.modal :as modal]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [t]]
+   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
 
-
 (mf/defc value-saturation-selector [{:keys [hue saturation value on-change]}]
   (let [dragging? (mf/use-state false)
         calculate-pos
@@ -50,7 +50,8 @@
 
 
 (mf/defc ramp-selector [{:keys [color disable-opacity on-change]}]
-  (let [{hue :h saturation :s value :v alpha :alpha} color
+  (let [{hex :hex
+         hue :h saturation :s value :v alpha :alpha} color
 
         on-change-value-saturation
         (fn [new-saturation new-value]
@@ -80,7 +81,8 @@
        :on-change on-change-value-saturation}]
 
      [:div.shade-selector
-      [:div.color-bullet]
+      [:& color-bullet {:color {:color hex
+                                :opacity alpha}}]
       [:& slider-selector {:class "hue"
                            :max-value 360
                            :value hue

frontend/src/app/main/ui/workspace/shapes/common.cljs

@@ -73,22 +73,24 @@
           on-context-menu (mf/use-callback
                            (mf/deps shape)
                            #(on-context-menu % shape))
-          filter-id (mf/use-memo filters/get-filter-id)]
+          render-id (mf/use-memo #(str (uuid/next)))]
 
       [:g.shape {:on-mouse-down on-mouse-down
                  :on-context-menu on-context-menu
-                 :filter (filters/filter-str filter-id shape)}
+                 :filter (filters/filter-str (str "filter_" render-id) shape)}
 
-       [:& filters/filters {:filter-id filter-id :shape shape}]
+       [:& filters/filters {:filter-id (str "filter_" render-id) :shape shape}]
 
        (when (:fill-color-gradient shape)
          [:& grad/gradient {:attr :fill-color-gradient
+                            :render-id render-id
                             :shape shape}])
 
        (when (:stroke-color-gradient shape)
          [:& grad/gradient {:attr :stroke-color-gradient
+                            :render-id render-id
                             :shape shape}])
        
-       [:& component {:shape shape}]])))
+       [:& component {:shape (assoc shape :render-id render-id)}]])))
 
 

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

@@ -217,8 +217,9 @@
           (st/emit! (dwl/update-color (assoc color :name name))))
 
         edit-color
-        (fn [value]
-          (st/emit! (dwl/update-color (assoc color :color value))))
+        (fn [new-color]
+          (let [updated-color (merge new-color (select-keys color [:id :file-id :name]))]
+            (st/emit! (dwl/update-color updated-color))))
 
         delete-color
         (fn []
@@ -253,7 +254,6 @@
                         :y (.-clientY event)
                         :on-accept edit-color
                         :data color
-                        :disable-opacity true
                         :position :right}))
 
         on-context-menu
@@ -321,8 +321,8 @@
                         {:x (.-clientX event)
                          :y (.-clientY event)
                          :on-accept add-color
-                         :value "#406280"
-                         :disable-opacity true
+                         :data {:color "#406280"
+                                :opacity 1}
                          :position :right})))]
     [:div.asset-group
      [:div.group-title {:class (when (not open?) "closed")}
@@ -334,7 +334,12 @@
        [:div.group-list
         (for [color colors]
           [:& color-item {:key (:id color)
-                          :color color
+                          :color (if (:value color)
+                                   (-> color
+                                       (assoc :color (:value color)
+                                              :opacity 1)
+                                       (dissoc :value))                                   
+                                   color)
                           :file-id file-id
                           :local? local?
                           :locale locale}])])]))