Merge pull request #276 from uxbox/304/edit-multi-properties

🎉 Display properly multiple text properties

common/uxbox/common/geom/shapes.cljc

@@ -855,3 +855,19 @@
 
       :else srect))))
 
+(defn get-attrs-multi
+  [shapes attrs]
+  ;; Extract some attributes of a list of shapes.
+  ;; For each attribute, if the value is the same in all shapes,
+  ;; wll take this value. If there is any shape that is different,
+  ;; the value of the attribute will be the keyword :multiple.
+  (let [combine-value #(if (= %1 %2) %1 :multiple)
+
+        combine-values (fn [attrs shape values]
+                         (map #(combine-value (get shape %) (get values %)) attrs))
+
+        reducer (fn [result shape]
+                  (zipmap attrs (combine-values attrs shape result)))]
+
+    (reduce reducer (select-keys (first shapes) attrs) (rest shapes))))
+

frontend/src/uxbox/main/data/workspace/texts.cljs

@@ -16,6 +16,7 @@
    [clojure.walk :as walk]
    [goog.object :as gobj]
    [potok.core :as ptk]
+   [uxbox.common.geom.shapes :as geom]
    [uxbox.main.data.workspace.common :as dwc]
    [uxbox.main.fonts :as fonts]
    [uxbox.util.object :as obj]))
@@ -119,10 +120,8 @@
 (defn- shape-current-values
   [shape pred attrs]
   (let [root  (:content shape)
-        nodes (nodes-seq pred root)
-        match (first nodes)]
-    (when match
-      (select-keys match attrs))))
+        nodes (nodes-seq pred root)]
+    (geom/get-attrs-multi nodes attrs)))
 
 (defn current-text-values
   [{:keys [editor default attrs shape]}]

frontend/src/uxbox/main/refs.cljs

@@ -124,7 +124,7 @@
            (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 (mapv #(get objects %)))))]
+             (mapv #(get objects %) selected)))]
     (l/derived selector st/state =)))
 
 (def selected-shapes-with-children

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

@@ -67,8 +67,6 @@
                  (fn []
                    (swap! loading? not))))))
 
-        _ (prn "exports-menu" exports)
-
         add-export
         (mf/use-callback
          (mf/deps shape)

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

@@ -11,8 +11,8 @@
 (ns uxbox.main.ui.workspace.sidebar.options.group
   (:require
    [rumext.alpha :as mf]
+   [uxbox.common.geom.shapes :as geom]
    [uxbox.main.refs :as refs]
-   [uxbox.main.ui.workspace.sidebar.options.multiple :refer [get-multi]]
    [uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
    [uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
    [uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]))
@@ -23,8 +23,8 @@
         children (mf/deref (refs/objects-by-id child-ids))
         type (:type shape)
         measure-values (select-keys shape measure-attrs)
-        fill-values (get-multi children fill-attrs)
-        stroke-values (get-multi children stroke-attrs)]
+        fill-values (geom/get-attrs-multi children fill-attrs)
+        stroke-values (geom/get-attrs-multi children stroke-attrs)]
   [:*
    [:& measures-menu {:ids [(:id shape)]
                       :type type

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

@@ -25,7 +25,7 @@
 
 (def measure-attrs [:proportion-lock :width :height :x :y :rotation :rx :ry :selrect])
 
-(defn attr->string [attr values]
+(defn- attr->string [attr values]
   (let [value (attr values)]
     (if (= value :multiple)
       ""

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

@@ -10,34 +10,19 @@
 (ns uxbox.main.ui.workspace.sidebar.options.multiple
   (:require
    [rumext.alpha :as mf]
+   [uxbox.common.geom.shapes :as geom]
    [uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
    [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
-  [shapes attrs]
-  ;; Extract some attributes of a list of shapes.
-  ;; For each attribute, if the value is the same in all shapes,
-  ;; wll take this value. If there is any shape that is different,
-  ;; the value of the attribute will be the keyword :multiple.
-  (let [combine-value #(if (= %1 %2) %1 :multiple)
-
-        combine-values (fn [attrs shape values]
-                         (map #(combine-value (get shape %) (get values %)) attrs))
-
-        reducer (fn [result shape]
-                  (zipmap attrs (combine-values attrs shape result)))]
-
-    (reduce reducer (select-keys (first shapes) attrs) (rest shapes))))
-
 
 (mf/defc options
   {::mf/wrap [mf/memo]}
   [{:keys [shapes] :as props}]
   (let [ids (map :id shapes)
-        measure-values (get-multi shapes measure-attrs)
-        fill-values (get-multi shapes fill-attrs)
-        stroke-values (get-multi shapes stroke-attrs)]
+        measure-values (geom/get-attrs-multi shapes measure-attrs)
+        fill-values (geom/get-attrs-multi shapes fill-attrs)
+        stroke-values (geom/get-attrs-multi shapes stroke-attrs)]
     [:*
      [:& measures-menu {:ids ids
                         :type :multiple

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

@@ -44,14 +44,14 @@
          (identical? (:stroke-opacity new-values)
                      (:stroke-opacity old-values)))))
 
-(defn width->string [width]
+(defn- width->string [width]
   (if (= width :multiple)
    ""
    (str (-> width
             (d/coalesce 1)
             (math/round)))))
 
-(defn enum->string [value]
+(defn- enum->string [value]
   (if (= value :multiple)
     ""
     (pr-str value)))

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

@@ -25,6 +25,11 @@
    [uxbox.util.i18n :as i18n :refer [tr t]]
    ["slate" :refer [Transforms]]))
 
+(defn- attr->string [value]
+  (if (= value :multiple)
+    ""
+    (str value)))
+
 (def ^:private editor-ref
   (l/derived :editor refs/workspace-local))
 
@@ -44,15 +49,12 @@
        (:name font)])]])
 
 (mf/defc font-options
-  [{:keys [editor shape] :as props}]
+  [{:keys [editor shape locale] :as props}]
   (let [selection (mf/use-ref)
 
         {:keys [font-id
                 font-size
-                font-variant-id]
-         :or {font-id "sourcesanspro"
-              font-size "14"
-              font-variant-id "regular"}}
+                font-variant-id]}
         (dwt/current-text-values
          {:editor editor
           :shape shape
@@ -60,6 +62,10 @@
                   :font-size
                   :font-variant-id]})
 
+        font-id (or font-id "sourcesanspro")
+        font-size (or font-size "14")
+        font-variant-id (or font-variant-id "regular")
+
         fonts     (mf/deref fonts/fontsdb)
         font      (get fonts font-id)
 
@@ -77,18 +83,20 @@
         on-font-family-change
         (fn [event]
           (let [id (-> (dom/get-target event)
-                       (dom/get-value))
-                font (get fonts id)]
-            (fonts/ensure-loaded! id (partial change-font id))))
+                       (dom/get-value))]
+            (when-not (str/empty? id)
+              (let [font (get fonts id)]
+                (fonts/ensure-loaded! id (partial change-font id))))))
 
         on-font-size-change
         (fn [event]
           (let [val (-> (dom/get-target event)
                         (dom/get-value))]
-            (st/emit! (dwt/update-text-attrs
-                       {:id (:id shape)
-                        :editor editor
-                        :attrs {:font-size val}}))))
+            (when-not (str/empty? val)
+              (st/emit! (dwt/update-text-attrs
+                         {:id (:id shape)
+                          :editor editor
+                          :attrs {:font-size val}})))))
 
         on-font-variant-change
         (fn [event]
@@ -103,19 +111,22 @@
                                 :font-family (:family font)
                                 :font-variant-id id
                                 :font-weight (:weight variant)
-                                :font-style (:style variant)}}))))
-        ]
+                                :font-style (:style variant)}}))))]
 
     [:*
      [:div.row-flex
-      [:select.input-select {:value font-id
+      [:select.input-select {:value (attr->string font-id)
                              :on-change on-font-family-change}
+       (when (= font-id :multiple)
+         [:option {:value ""} (t locale "settings.multiple")])
        [:& font-select-optgroups]]]
 
      [:div.row-flex
       [:div.editable-select
-       [:select.input-select {:value font-size
+       [:select.input-select {:value (attr->string font-size)
                               :on-change on-font-size-change}
+        (when (= font-size :multiple)
+          [:option {:value ""} "--"])
         [:option {:value "8"} "8"]
         [:option {:value "9"} "9"]
         [:option {:value "10"} "10"]
@@ -131,11 +142,13 @@
                            :min "0"
                            :max "200"
                            :value font-size
-                           :on-change on-font-size-change
-                           }]]
+                           :placeholder "--"
+                           :on-change on-font-size-change}]]
 
-      [:select.input-select {:value font-variant-id
+      [:select.input-select {:value (attr->string font-variant-id)
                              :on-change on-font-variant-change}
+       (when (= font-size :multiple)
+         [:option {:value ""} "--"])
        (for [variant (:variants font)]
          [:option {:value (:id variant)
                    :key (pr-str variant)}
@@ -144,13 +157,14 @@
 
 (mf/defc text-align-options
   [{:keys [editor shape locale] :as props}]
-  (let [{:keys [text-align]
-         :or {text-align "left"}}
+  (let [{:keys [text-align]}
         (dwt/current-paragraph-values
          {:editor editor
           :shape shape
           :attrs [:text-align]})
 
+        text-align (or text-align "left")
+
         on-change
         (fn [event type]
           (st/emit! (dwt/update-paragraph-attrs
@@ -204,16 +218,17 @@
 
 (mf/defc spacing-options
   [{:keys [editor shape locale] :as props}]
-  (let [{:keys [letter-spacing
-                line-height]
-         :or {line-height "1.2"
-              letter-spacing "0"}}
+  (let [{:keys [line-height
+                letter-spacing]}
         (dwt/current-text-values
          {:editor editor
           :shape shape
           :attrs [:line-height
                   :letter-spacing]})
 
+        line-height (or line-height "1.2")
+        letter-spacing (or letter-spacing "0")
+
         on-change
         (fn [event attr]
           (let [val (-> (dom/get-target event)
@@ -232,7 +247,8 @@
         :step "0.1"
         :min "0"
         :max "200"
-        :value line-height
+        :value (attr->string line-height)
+        :placeholder (t locale "settings.multiple")
         :on-change #(on-change % :line-height)}]]
 
      [:div.input-icon
@@ -244,7 +260,8 @@
         :step "0.1"
         :min "0"
         :max "200"
-        :value letter-spacing
+        :value (attr->string letter-spacing)
+        :placeholder (t locale "settings.multiple")
         :on-change #(on-change % :letter-spacing)}]]]))
 
 ;; (mf/defc box-sizing-options
@@ -262,13 +279,14 @@
 
 (mf/defc vertical-align-options
   [{:keys [editor locale shape] :as props}]
-  (let [{:keys [vertical-align]
-         :or {vertical-align "top"}}
+  (let [{:keys [vertical-align]}
         (dwt/current-root-values
          {:editor editor
           :shape shape
           :attrs [:vertical-align]})
 
+        vertical-align (or vertical-align "top")
+
         on-change
         (fn [event type]
           (st/emit! (dwt/update-root-attrs
@@ -297,13 +315,14 @@
 
 (mf/defc text-decoration-options
   [{:keys [editor locale shape] :as props}]
-  (let [{:keys [text-decoration]
-         :or {text-decoration "none"}}
+  (let [{:keys [text-decoration]}
         (dwt/current-text-values
          {:editor editor
           :shape shape
           :attrs [:text-decoration]})
 
+        text-decoration (or text-decoration "none")
+
         on-change
         (fn [event type]
           (st/emit! (dwt/update-text-attrs
@@ -333,13 +352,14 @@
 
 (mf/defc text-transform-options
   [{:keys [editor locale shape] :as props}]
-  (let [{:keys [text-transform]
-         :or {text-transform "none"}}
+  (let [{:keys [text-transform]}
         (dwt/current-text-values
          {:editor editor
           :shape shape
           :attrs [:text-transform]})
 
+        text-transform (or text-transform "none")
+
         on-change
         (fn [event type]
           (st/emit! (dwt/update-text-attrs