✨ Add the ability to remove the default fill from elements.

backend/src/uxbox/http/session.clj

@@ -52,6 +52,8 @@
         (handler (assoc request :profile-id profile-id))
         (handler request)))))
 
+;; TODO: maybe rename to wrap-session?
+
 (def auth
   {:nane ::auth
    :compile (constantly wrap-auth)})

common/uxbox/common/pages.cljc

@@ -219,8 +219,10 @@
      :name "root"
      :shapes []}}})
 
+(def default-color "#b1b2b5") ;; $color-gray-20
+
 (def default-shape-attrs
-  {:fill-color "#000000"
+  {:fill-color default-color
    :fill-opacity 1})
 
 (def default-frame-attrs
@@ -229,8 +231,6 @@
    :fill-opacity 1
    :shapes []})
 
-(def ^:private default-color "#b1b2b5") ;; $color-gray-20
-
 (def ^:private minimal-shapes
   [{:type :rect
     :name "Rect"

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

@@ -10,17 +10,19 @@
 (ns uxbox.main.ui.workspace.sidebar.options.fill
   (:require
    [rumext.alpha :as mf]
+   [uxbox.common.pages :as cp]
    [uxbox.main.data.workspace.common :as dwc]
    [uxbox.main.data.workspace.texts :as dwt]
-   [uxbox.main.store :as st]
    [uxbox.main.refs :as refs]
+   [uxbox.main.store :as st]
+   [uxbox.main.ui.icons :as i]
    [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
-   [uxbox.util.object :as obj]
+   [uxbox.util.i18n :as i18n :refer [tr t]]
-   [uxbox.util.i18n :as i18n :refer [tr t]]))
+   [uxbox.util.object :as obj]))
 
 (def fill-attrs [:fill-color :fill-opacity])
 
-(defn- fill-menu-memo-equals?
+(defn- fill-menu-props-equals?
   [np op]
   (let [new-ids    (obj/get np "ids")
         old-ids    (obj/get op "ids")
@@ -30,45 +32,72 @@
         old-values (obj/get op "values")]
     (and (= new-ids old-ids)
          (= new-editor old-editor)
-         (identical? (:fill-color new-values)
+         (= (:fill-color new-values)
-                     (:fill-color old-values))
+            (:fill-color old-values))
-         (identical? (:fill-opacity new-values)
+         (= (:fill-opacity new-values)
-                     (:fill-opacity old-values)))))
+            (:fill-opacity old-values)))))
 
 (mf/defc fill-menu
-  {::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
+  {::mf/wrap [#(mf/memo' % fill-menu-props-equals?)]}
   [{:keys [ids type values editor] :as props}]
-  (let [locale (i18n/use-locale)
+  (let [locale    (mf/deref i18n/locale)
-
+        shapes    (deref (refs/objects-by-id ids))
-        shapes (deref (refs/objects-by-id ids))
+        text-ids  (map :id (filter #(= (:type %) :text) shapes))
-        text-ids (map :id (filter #(= (:type %) :text) shapes))
         other-ids (map :id (filter #(not= (:type %) :text) shapes))
+        show?     (not (nil? (:fill-color values)))
 
         label (case type
                 :multiple (t locale "workspace.options.selection-fill")
                 :group (t locale "workspace.options.group-fill")
                 (t locale "workspace.options.fill"))
+
         color {:value (:fill-color values)
                :opacity (:fill-opacity values)}
 
-        handle-change-color (fn [value opacity]
+        on-add
-                                (let [change #(cond-> %
+        (mf/use-callback
-                                                value (assoc :fill-color value)
+         (mf/deps ids)
-                                                opacity (assoc :fill-opacity opacity))
+         (fn [event]
-                                      converted-attrs (cond-> {}
+           (st/emit! (dwc/update-shapes ids #(assoc % :fill-color cp/default-color)))))
-                                                        value (assoc :fill value)
+
-                                                        opacity (assoc :opacity opacity))]
+
+        on-delete
+        (mf/use-callback
+         (mf/deps ids)
+         (fn [event]
+           (st/emit! (dwc/update-shapes ids #(dissoc % :fill-color)))))
+
+        on-change
+        (mf/use-callback
+         (mf/deps ids)
+         (fn [value opacity]
+           (let [change #(cond-> %
+                           value (assoc :fill-color value)
+                           opacity (assoc :fill-opacity opacity))
+                 converted-attrs (cond-> {}
+                                   value (assoc :fill value)
+                                   opacity (assoc :opacity opacity))]
+
+             (when-not (empty? other-ids)
+               (st/emit! (dwc/update-shapes ids change)))
+             (when-not (empty? text-ids)
+               (run! #(st/emit! (dwt/update-text-attrs
+                                 {:id %
+                                  :editor editor
+                                  :attrs converted-attrs}))
+                     text-ids)))))]
+    (prn "fill-menu" ids values)
+    (if show?
+      [:div.element-set
+       [:div.element-set-title
+        [:span label]
+        [:div.add-page {:on-click on-delete} i/minus]]
+
+       [:div.element-set-content
+        [:& color-row {:color color :on-change on-change}]]]
+
+      [:div.element-set
+       [:div.element-set-title
+        [:span label]
+        [:div.add-page {:on-click on-add} i/close]]])))
 
-                                  (when-not (empty? other-ids)
-                                    (st/emit! (dwc/update-shapes ids change)))
-                                  (when-not (empty? text-ids)
-                                    (run! #(st/emit! (dwt/update-text-attrs
-                                                       {:id %
-                                                        :editor editor
-                                                        :attrs converted-attrs}))
-                                          text-ids))))]
-    [:div.element-set
-     [:div.element-set-title label]
-     [:div.element-set-content
-      [:& color-row {:color color
-                     :on-change handle-change-color}]]]))

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

@@ -12,21 +12,26 @@
    [cuerdas.core :as str]
    [rumext.alpha :as mf]
    [uxbox.common.data :as d]
-   [uxbox.main.ui.icons :as i]
+   [uxbox.common.math :as math]
    [uxbox.main.data.workspace.common :as dwc]
    [uxbox.main.store :as st]
+   [uxbox.main.ui.icons :as i]
    [uxbox.main.ui.modal :as modal]
    [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
+   [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [uxbox.util.data :refer [classnames]]
    [uxbox.util.dom :as dom]
-   [uxbox.util.object :as obj]
    [uxbox.util.i18n :as i18n :refer [tr t]]
-   [uxbox.common.math :as math]
+   [uxbox.util.object :as obj]))
-   [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]))
 
-(def stroke-attrs [:stroke-style :stroke-alignment :stroke-width :stroke-color :stroke-opacity])
+(def stroke-attrs
+  [:stroke-style
+   :stroke-alignment
+   :stroke-width
+   :stroke-color
+   :stroke-opacity])
 
-(defn- stroke-menu-memo-equals?
+(defn- stroke-menu-props-equals?
   [np op]
   (let [new-ids    (obj/get np "ids")
         old-ids    (obj/get op "ids")
@@ -57,7 +62,7 @@
     (pr-str value)))
 
 (mf/defc stroke-menu
-  {::mf/wrap [#(mf/memo' % stroke-menu-memo-equals?)]}
+  {::mf/wrap [#(mf/memo' % stroke-menu-props-equals?)]}
   [{:keys [ids type values] :as props}]
   (let [locale (i18n/use-locale)
         label (case type