✨ Fixes issues with some shapes

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

@@ -102,6 +102,13 @@ ul.palette-menu .color-bullet {
   }
 }
 
+.color-data .color-bullet.multiple {
+  background: transparent;
+
+  &::before {
+    content: "?"
+  }
+}
 
 .color-data .color-bullet {
   background-color: $color-gray-30;

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

@@ -21,7 +21,7 @@
 
 (defonce ^:private default-square-params
   {:size 16
-   :color {:value "#59B9E2"
+   :color {:color "#59B9E2"
            :opacity 0.2}})
 
 (defonce ^:private default-layout-params
@@ -30,7 +30,7 @@
    :item-length nil
    :gutter 8
    :margin 0
-   :color {:value "#DE4762"
+   :color {:color "#DE4762"
            :opacity 0.1}})
 
 (defonce default-grid-params

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

@@ -22,6 +22,7 @@
    [app.common.spec :as us]
    [app.common.uuid :as uuid]
    [app.main.data.workspace.common :as dwc]
+   [app.main.data.modal :as md]
    [app.main.streams :as ms]
    [app.main.worker :as uw]))
 
@@ -123,9 +124,14 @@
   (ptk/reify ::deselect-all
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-local #(-> %
-                                          (assoc :selected (d/ordered-set))
-                                          (dissoc :selected-frame))))))
+
+      ;; Only deselect if there is no modal openned
+      (cond-> state
+        (not (::md/modal state))
+        (update :workspace-local
+                #(-> %
+                     (assoc :selected (d/ordered-set))
+                     (dissoc :selected-frame)))))))
 
 ;; --- Select Shapes (By selrect)
 

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

@@ -9,32 +9,20 @@
 
 (ns app.main.ui.components.color-bullet
   (:require
-   #_[beicon.core :as rx]
-   #_[goog.events :as events]
-   #_[okulary.core :as l]
    [rumext.alpha :as mf]
-   [app.util.color :as uc]
-   #_[cuerdas.core :as str]
-   #_[app.common.math :as mth]
-   #_[app.main.data.colors :as mdc]
-   #_[app.main.data.workspace :as udw]
-   #_[app.main.store :as st]
-   #_[app.main.ui.components.dropdown :refer [dropdown]]
-   #_[app.main.ui.icons :as i]
-   #_[app.main.ui.keyboard :as kbd]
-   #_[app.util.color :refer [hex->rgb]]
-   #_[app.util.dom :as dom]
-   #_[app.util.object :as obj]
-   #_[app.main.refs :as refs]
-   #_[app.util.i18n :as i18n :refer [t]]))
+   [app.util.color :as uc]))
 
 (mf/defc color-bullet [{:keys [color on-click]}]
-  (let [color (if (string? color) {:color color :opacity 1} color)]
-    [:div.color-bullet {:on-click #(when on-click (on-click %))}
-     (when (not (:gradient color))
-       [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
+  (if (uc/multiple? color)
+    [:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
 
-     [:div.color-bullet-right {:style {:background (uc/color->background color)}}]]))
+    ;; No multiple selection
+    (let [color (if (string? color) {:color color :opacity 1} color)]
+      [:div.color-bullet {:on-click #(when on-click (on-click %))}
+       (when (not (:gradient color))
+         [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}])
+
+       [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])))
 
 (defn gradient-type->string [{:keys [type]}]
   (case type

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

@@ -25,8 +25,9 @@
     (str/fmt "url(#$0)" [filter-id])))
 
 (mf/defc color-matrix
-  [{:keys [color opacity]}]
-  (let [[r g b a] (color/hex->rgba color opacity)
+  [{:keys [color]}]
+  (let [{:keys [color opacity]} color
+        [r g b a] (color/hex->rgba color opacity)
         [r g b] [(/ r 255) (/ g 255) (/ b 255)]]
     [:feColorMatrix
      {:type "matrix"
@@ -36,7 +37,7 @@
   [{:keys [filter-id filter shape]}]
 
   (let [{:keys [x y width height]} (:selrect shape)
-        {:keys [id in-filter color opacity offset-x offset-y blur spread]} filter]
+        {:keys [id in-filter color offset-x offset-y blur spread]} filter]
     [:*
      [:feColorMatrix {:in "SourceAlpha" :type "matrix"
                       :values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}]
@@ -48,7 +49,7 @@
 
      [:feOffset {:dx offset-x :dy offset-y}]
      [:feGaussianBlur {:stdDeviation (/ blur 2)}]
-     [:& color-matrix {:color color :opacity opacity}]
+     [:& color-matrix {:color color}]
 
      [:feBlend {:mode "normal"
                 :in2 in-filter
@@ -58,7 +59,7 @@
   [{:keys [filter-id filter shape]}]
 
   (let [{:keys [x y width height]} (:selrect shape)
-        {:keys [id in-filter color opacity offset-x offset-y blur spread]} filter]
+        {:keys [id in-filter color offset-x offset-y blur spread]} filter]
     [:*
      [:feColorMatrix {:in "SourceAlpha" :type "matrix"
                       :values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
@@ -78,7 +79,7 @@
                     :k2 "-1"
                     :k3 "1"}]
 
-     [:& color-matrix {:color color :opacity opacity}]
+     [:& color-matrix {:color color}]
 
      [:feBlend {:mode "normal"
                 :in2 in-filter

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

@@ -155,7 +155,9 @@
                 (st/emit! (dc/select-gradient-stop offset)))))
 
         on-select-library-color
-        (fn [color] (reset! state (data->state color)))
+        (fn [color]
+          (reset! dirty? true)
+          (reset! state (data->state color)))
 
         on-add-library-color
         (fn [color] (st/emit! (dwl/add-color (state->data @state))))
@@ -216,7 +218,7 @@
            (handle-change-color {:hex hex
                                  :r r :g g :b b
                                  :h h :s s :v v
-                                 :alpha alpha})))))
+                                 :alpha (/ alpha 255)})))))
 
     ;; Changes when another gradient handler is selected
     (mf/use-effect
@@ -297,6 +299,8 @@
                         :on-change handle-change-color}]
 
       [:& libraries {:current-color current-color
+                     :disable-gradient disable-gradient
+                     :disable-opacity disable-opacity
                      :on-select-color on-select-library-color
                      :on-add-library-color on-add-library-color}]
 

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

@@ -32,7 +32,8 @@
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
    [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]))
 
-(mf/defc libraries [{:keys [current-color on-select-color on-add-library-color]}]
+(mf/defc libraries [{:keys [current-color on-select-color on-add-library-color
+                            disable-gradient disable-opacity]}]
   (let [selected-library       (mf/use-state "recent")
         current-library-colors (mf/use-state [])
 
@@ -45,7 +46,11 @@
         (fn [selected]
           (if (#{"recent" "file"} selected)
             (keyword selected)
-            (uuid selected)) )]
+            (uuid selected)) )
+
+        check-valid-color? (fn [color]
+                             (and (or (not disable-gradient) (not (:gradient color)))
+                                  (or (not disable-opacity) (= 1 (:opacity color)))))]
 
     ;; Load library colors when the select is changed
     (mf/use-effect
@@ -63,14 +68,14 @@
                :else ;; Library UUID
                (map #(merge {:file-id (uuid @selected-library)})
                     (vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))]
-         (reset! current-library-colors (into [] mapped-colors)))))
+         (reset! current-library-colors (into [] (filter check-valid-color?) mapped-colors)))))
 
     ;; If the file colors change and the file option is selected updates the state
     (mf/use-effect
      (mf/deps file-colors)
      (fn [] (when (= @selected-library "file")
               (let [colors (vals file-colors)]
-                (reset! current-library-colors (into [] colors))))))
+                (reset! current-library-colors (into [] (filter check-valid-color?) colors))))))
 
 
     [:div.libraries

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

@@ -18,7 +18,9 @@
 
 (mf/defc square-grid [{:keys [frame zoom grid] :as props}]
   (let [{:keys [color size] :as params} (-> grid :params)
-        {color-value :value color-opacity :opacity} (-> grid :params :color)
+        {color-value :color color-opacity :opacity} (-> grid :params :color)
+        ;; Support for old color format
+        color-value (or color-value (:value (get-in grid [:params :color :value])))
         {frame-width :width frame-height :height :keys [x y]} frame]
     (when (> size 0)
       [:g.grid
@@ -43,7 +45,9 @@
                           :stroke-width (str (/ 1 zoom))}}])]])))
 
 (mf/defc layout-grid [{:keys [key frame zoom grid]}]
-  (let [{color-value :value color-opacity :opacity} (-> grid :params :color)
+  (let [{color-value :color color-opacity :opacity} (-> grid :params :color)
+        ;; Support for old color format
+        color-value (or color-value (:value (get-in grid [:params :color :value])))
         gutter (-> grid :params :gutter)
         gutter? (and (not (nil? gutter)) (not= gutter 0))
 

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

@@ -101,14 +101,17 @@
                                 (assoc-in [:params :item-length] item-length)))))
 
         handle-change-color
-        (fn [value opacity]
-          (emit-changes! #(-> %
-                              (assoc-in [:params :color :value] value)
-                              (assoc-in [:params :color :opacity] opacity))))
+        (fn [color]
+          (emit-changes! #(-> % (assoc-in [:params :color] color))))
 
         handle-use-default
         (fn []
-          (emit-changes! #(hash-map :params ((:type grid) default-grid-params))))
+          (let [params ((:type grid) default-grid-params)
+                color (or (get-in params [:color :value]) (get-in params [:color :color]))
+                params (-> params
+                           (assoc-in [:color :color] color)
+                           (update :color dissoc :value))]
+            (emit-changes! #(hash-map :params params))))
 
         handle-set-as-default
         (fn []
@@ -214,6 +217,7 @@
                         :on-change (handle-change :params :margin)}]])
 
       [:& color-row {:color (:color params)
+                     :disable-gradient true
                      :on-change handle-change-color}]
       [:div.row-flex
        [:button.btn-options {:disabled is-default

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

@@ -12,14 +12,15 @@
    [rumext.alpha :as mf]
    [cuerdas.core :as str]
    [app.common.math :as math]
-   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]
+   [app.common.pages :as cp]
+   [app.common.data :as d]
    [app.util.dom :as dom]
    [app.util.data :refer [classnames]]
    [app.util.i18n :as i18n :refer [tr]]
-   [app.main.data.modal :as modal]
-   [app.common.data :as d]
+   [app.util.color :as uc]
    [app.main.refs :as refs]
-   [app.util.color :as uc]))
+   [app.main.data.modal :as modal]
+   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]))
 
 (defn color-picker-callback
   [color disable-gradient disable-opacity handle-change-color handle-open handle-close]
@@ -73,7 +74,9 @@
                           (update :color #(or % (:value color)))))
 
         change-value (fn [new-value]
-                       (when on-change (on-change (assoc color :color new-value))))
+                       (when on-change (on-change (-> color
+                                                      (assoc :color new-value)
+                                                      (dissoc :gradient)))))
 
         change-opacity (fn [new-opacity]
                          (when on-change (on-change (assoc color :opacity new-opacity))))
@@ -107,8 +110,16 @@
 
         handle-click-color (mf/use-callback
                             (mf/deps color)
-                            (color-picker-callback color disable-gradient disable-opacity
-                                                   handle-pick-color handle-open handle-close))]
+                            (let [;; If multiple, we change to default color
+                                  color (if (uc/multiple? color)
+                                          {:color cp/default-color :opacity 1}
+                                          color)]
+                              (color-picker-callback color
+                                                     disable-gradient
+                                                     disable-opacity
+                                                     handle-pick-color
+                                                     handle-open
+                                                     handle-close)))]
 
     (mf/use-effect
      (mf/deps color)
@@ -118,11 +129,6 @@
     [:div.row-flex.color-data
      [:& color-bullet {:color color
                        :on-click handle-click-color}]
-     #_[:span.color-th
-      {:class (when (and (:id color) (not= (:id color) :multiple)) "color-name")
-       :style {:background (uc/color->background color)}
-       :on-click handle-click-color}
-      (when (= (:color color) :multiple) "?")]
 
      (cond
        ;; Rendering a color with ID
@@ -131,7 +137,8 @@
         [:div.color-name (str (get-color-name color))]]
 
        ;; Rendering a gradient
-       (and (:gradient color) (get-in color [:gradient :type]))
+       (and (not (uc/multiple? color))
+            (:gradient color) (get-in color [:gradient :type]))
        [:div.color-info
         [:div.color-name
          (case (get-in color [:gradient :type])
@@ -142,13 +149,16 @@
        :else
        [:*
         [:div.color-info
-         [:input {:value (-> color :color remove-hash)
+         [:input {:value (if (uc/multiple? color)
+                           ""
+                           (-> color :color remove-hash))
                   :pattern "^[0-9a-fA-F]{0,6}$"
                   :placeholder (tr "settings.multiple")
                   :on-click select-all
                   :on-change handle-value-change}]]
 
-        (when (not disable-opacity)
+        (when (and (not disable-opacity)
+                   (not (:gradient color)))
           [:div.input-element
            {:class (classnames :percentail (not= (:opacity color) :multiple))}
            [:input.input-text {:type "number"

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

@@ -174,7 +174,11 @@
         [:span.after (t locale "workspace.options.shadow-options.spread")]]]
 
       [:div.color-row-wrap
-       [:& color-row {:color {:value (:color value) :opacity (:opacity value)}
+       [:& color-row {:color (if (string? (:color value))
+                               ;; Support for old format colors
+                               {:color (:color value) :opacity (:opacity value)}
+                               (:color value))
+                      :disable-gradient true
                       :on-change (update-color index)
                       :on-open #(st/emit! dwc/start-undo-transaction)
                       :on-close #(st/emit! dwc/commit-undo-transaction)}]]]]))

frontend/src/app/util/color.cljs

@@ -103,3 +103,9 @@
         (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity))
 
       :else "transparent")))
+
+(defn multiple? [{:keys [value color gradient]}]
+  (or (= value :multiple)
+      (= color :multiple)
+      (= gradient :multiple)
+      (and gradient color)))