🎉 Allow to edit options of grouped objects

frontend/resources/locales.json

@@ -840,7 +840,7 @@
     }
   },
   "settings.multiple" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:127", "src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs:117", "src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs:126" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:132", "src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs:117", "src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs:126" ],
     "translations" : {
       "en" : "Multiple",
       "es" : "Múltiple"
@@ -1387,7 +1387,7 @@
     }
   },
   "workspace.options.fill" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:45", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:382" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:40", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:382" ],
     "translations" : {
       "en" : "Fill",
       "fr" : "Remplissage",
@@ -1714,6 +1714,20 @@
       "es" : "Rejilla & Estructuras"
     }
   },
+  "workspace.options.group-fill" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:39" ],
+    "translations" : {
+      "en" : "Group fill",
+      "es" : "Relleno de grupo"
+    }
+  },
+  "workspace.options.group-stroke" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:65" ],
+    "translations" : {
+      "en" : "Group stroke",
+      "es" : "Borde de grupo"
+    }
+  },
   "workspace.options.navigate-to" : {
     "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs:59" ],
     "translations" : {
@@ -1778,6 +1792,20 @@
       "es" : "Selecciona un tablero"
     }
   },
+  "workspace.options.selection-fill" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:38" ],
+    "translations" : {
+      "en" : "Selection fill",
+      "es" : "Relleno de selección"
+    }
+  },
+  "workspace.options.selection-stroke" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:64" ],
+    "translations" : {
+      "en" : "Selection stroke",
+      "es" : "Borde de selección"
+    }
+  },
   "workspace.options.size" : {
     "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/measures.cljs:82", "src/uxbox/main/ui/workspace/sidebar/options/frame.cljs:98" ],
     "translations" : {
@@ -1795,7 +1823,7 @@
     }
   },
   "workspace.options.stroke" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:112", "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:150" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:66" ],
     "translations" : {
       "en" : "Stroke",
       "fr" : "Bordure",
@@ -1803,7 +1831,7 @@
     }
   },
   "workspace.options.stroke.center" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:134" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:139" ],
     "translations" : {
       "en" : "Center",
       "fr" : "Centre",
@@ -1811,7 +1839,7 @@
     }
   },
   "workspace.options.stroke.dashed" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:144" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:149" ],
     "translations" : {
       "en" : "Dashed",
       "fr" : "Tiré",
@@ -1819,7 +1847,7 @@
     }
   },
   "workspace.options.stroke.dotted" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:143" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:148" ],
     "translations" : {
       "en" : "Dotted",
       "fr" : "Pointillé",
@@ -1827,7 +1855,7 @@
     }
   },
   "workspace.options.stroke.inner" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:135" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:140" ],
     "translations" : {
       "en" : "Inside",
       "fr" : "Intérieur",
@@ -1835,7 +1863,7 @@
     }
   },
   "workspace.options.stroke.mixed" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:145" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:150" ],
     "translations" : {
       "en" : "Mixed",
       "fr" : "Mixte",
@@ -1843,7 +1871,7 @@
     }
   },
   "workspace.options.stroke.outer" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:136" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:141" ],
     "translations" : {
       "en" : "Outside",
       "fr" : "Extérieur",
@@ -1851,7 +1879,7 @@
     }
   },
   "workspace.options.stroke.solid" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:142" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:147" ],
     "translations" : {
       "en" : "Solid",
       "fr" : "Solide",

frontend/src/uxbox/main/refs.cljs

@@ -124,8 +124,8 @@
            (let [selected (get-in state [:workspace-local :selected])
                  page-id (get-in state [:workspace-page :id])
                  objects (get-in state [:workspace-data page-id :objects])]
-             (->> selected (map #(get objects %)))))]
-    (l/derived selector st/state)))
+             (->> selected (mapv #(get objects %)))))]
+    (l/derived selector st/state =)))
 
 (def selected-shapes-with-children
   (letfn [(selector [state]

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

@@ -17,9 +17,14 @@
 (mf/defc options
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
+        type (:type shape)
         stroke-values (select-keys shape stroke-attrs)]
-    [:div
+    [:*
      [:& measures-menu {:shape shape
                         :options #{:size :position :rotation}}]
-     [:& fill-menu {:ids [(:id shape)] :values (select-keys shape fill-attrs)}]
-     [:& stroke-menu {:ids ids :values stroke-values}]]))
+     [:& fill-menu {:ids ids
+                    :type type
+                    :values (select-keys shape fill-attrs)}]
+     [:& stroke-menu {:ids ids
+                      :type type
+                      :values stroke-values}]]))

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

@@ -32,8 +32,12 @@
 
 (mf/defc fill-menu
   {::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
-  [{:keys [ids values] :as props}]
+  [{:keys [ids type values] :as props}]
   (let [locale (i18n/use-locale)
+        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]
@@ -42,7 +46,7 @@
                                              opacity (assoc :fill-opacity opacity))]
                                 (st/emit! (dwc/update-shapes ids change))))]
     [:div.element-set
-     [:div.element-set-title (t locale "workspace.options.fill")]
+     [: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/frame.cljs

@@ -201,10 +201,15 @@
 (mf/defc options
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
+        type (:type shape)
         stroke-values (select-keys shape stroke-attrs)]
-  [:div
+  [:*
    [:& measures-menu {:shape shape}]
-   [:& fill-menu {:ids [(:id shape)] :values (select-keys shape fill-attrs)}]
-   [:& stroke-menu {:ids ids :values stroke-values}]
+   [:& fill-menu {:ids ids
+                  :type type
+                  :values (select-keys shape fill-attrs)}]
+   [:& stroke-menu {:ids ids
+                    :type type
+                    :values stroke-values}]
    [:& frame-grid {:shape shape}]]))
 

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

@@ -11,11 +11,27 @@
 (ns uxbox.main.ui.workspace.sidebar.options.group
   (:require
    [rumext.alpha :as mf]
-   [uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]))
+   [uxbox.main.refs :as refs]
+   [uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
+   [uxbox.main.ui.workspace.sidebar.options.multiple :refer [get-multi]]
+   [uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
+   [uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]))
 
 (mf/defc options
   [{:keys [shape] :as props}]
-  [:div
-   [:& measures-menu {:options #{:position :rotation}
-                      :shape shape}]])
+  (let [child-ids (:shapes shape)
+        children (mf/deref (refs/objects-by-id child-ids))
+
+        type (:type shape)
+        fill-values (get-multi children fill-attrs)
+        stroke-values (get-multi children stroke-attrs)]
+  [:*
+   [:& measures-menu {:options #{:position :rotation}
+                      :shape shape}]
+   [:& fill-menu {:ids child-ids
+                  :type type
+                  :values fill-values}]
+   [:& stroke-menu {:ids child-ids
+                    :type type
+                    :values stroke-values}]]))
 

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

@@ -17,8 +17,13 @@
 (mf/defc options
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
+        type (:type shape)
         stroke-values (select-keys shape stroke-attrs)]
-    [:div
+    [:*
      [:& measures-menu {:shape shape}]
-     [:& fill-menu {:ids [(:id shape)] :values (select-keys shape fill-attrs)}]
-     [:& stroke-menu {:ids ids :values stroke-values}]]))
+     [:& fill-menu {:ids ids
+                    :type type
+                    :values (select-keys shape fill-attrs)}]
+     [:& stroke-menu {:ids ids
+                      :type type
+                      :values stroke-values}]]))

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

@@ -14,5 +14,5 @@
 
 (mf/defc options
   [{:keys [shape] :as props}]
-  [:div
+  [:*
    [:& measures-menu {:shape shape}]])

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

@@ -14,7 +14,7 @@
    [uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
    [uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]))
 
-(defn- get-multi
+(defn get-multi
   [shapes attrs]
   (let [combine-value #(if (= %1 %2) %1 :multiple)
 
@@ -34,6 +34,10 @@
         fill-values (get-multi shapes fill-attrs)
         stroke-values (get-multi shapes stroke-attrs)]
     [:div
-     [:& fill-menu {:ids ids :values fill-values}]
-     [:& stroke-menu {:ids ids :values stroke-values}]]))
+     [:& fill-menu {:ids ids
+                    :type :multiple
+                    :values fill-values}]
+     [:& stroke-menu {:ids ids
+                      :type :multiple
+                      :values stroke-values}]]))
 

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

@@ -17,7 +17,12 @@
 (mf/defc options
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
+        type (:type shape)
         stroke-values (select-keys shape stroke-attrs)]
-    [:div
-     [:& fill-menu {:ids [(:id shape)] :values (select-keys shape fill-attrs)}]
-     [:& stroke-menu {:ids ids :values stroke-values}]]))
+    [:*
+     [:& fill-menu {:ids ids
+                    :type type
+                    :values (select-keys shape fill-attrs)}]
+     [:& stroke-menu {:ids ids
+                      :type type
+                      :values stroke-values}]]))

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

@@ -18,10 +18,15 @@
   {::mf/wrap [mf/memo]}
   [{:keys [shape] :as props}]
   (let [ids [(:id shape)]
+        type (:type shape)
         fill-values (select-keys shape fill-attrs)
         stroke-values (select-keys shape stroke-attrs)]
-    [:div
+    [:*
      [:& measures-menu {:shape shape}]
-     [:& fill-menu {:ids ids :values fill-values}]
-     [:& stroke-menu {:ids ids :values stroke-values}]]))
+     [:& fill-menu {:ids ids
+                    :type type
+                    :values fill-values}]
+     [:& stroke-menu {:ids ids
+                      :type type
+                      :values stroke-values}]]))
 

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

@@ -58,8 +58,13 @@
 
 (mf/defc stroke-menu
   {::mf/wrap [#(mf/memo' % stroke-menu-memo-equals?)]}
-  [{:keys [ids values] :as props}]
+  [{:keys [ids type values] :as props}]
   (let [locale (i18n/use-locale)
+        label (case type
+                :multiple (t locale "workspace.options.selection-stroke")
+                :group (t locale "workspace.options.group-stroke")
+                (t locale "workspace.options.stroke"))
+
         show-options (not= (:stroke-style values :none) :none)
 
         current-stroke-color {:value (:stroke-color values)
@@ -109,7 +114,7 @@
     (if show-options
       [:div.element-set
        [:div.element-set-title
-        [:span (t locale "workspace.options.stroke")]
+        [:span label]
         [:div.add-page {:on-click on-del-stroke} i/minus]]
 
        [:div.element-set-content
@@ -147,6 +152,6 @@
       ;; NO STROKE
       [:div.element-set
        [:div.element-set-title
-        [:span (t locale "workspace.options.stroke")]
+        [:span label]
         [:div.add-page {:on-click on-add-stroke} i/close]]])))
 

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

@@ -383,7 +383,6 @@
       [:div.element-set-content
        [:& text-fill-options {:editor editor :shape shape}]]]
 
-
      [:div.element-set
       [:div.element-set-title (t locale "workspace.options.font-options")]
       [:div.element-set-content