✨ Adds multiple edition

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -992,3 +992,39 @@
         }
     }
 }
+
+.multiple-typography {
+    margin: 0.5rem;
+    padding: 0.5rem;
+    border: 1px dashed $color-gray-30;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+
+    .multiple-typography-text,
+    .multiple-typography-button {
+        font-size: $fs13;
+        display: flex;
+        align-items: center;
+    }
+
+    .multiple-typography-button {
+        cursor: pointer;
+        svg {
+            transition: fill 0.3s;
+            width: 16px;
+            height: 16px;
+            fill: $color-gray-10;
+        }
+
+        &:hover svg {
+            fill: $color-primary;
+        }
+    }
+
+    svg {
+    }
+
+    .multiple-typography-button:hover svg {
+    }
+}

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

@@ -117,10 +117,27 @@
   (->> (tree-seq map? :children node)
        (filter match?)))
 
+(defonce default-text-attrs
+  {:name "Source Sans Pro Regular"
+   :font-id "sourcesanspro"
+   :font-family "sourcesanspro"
+   :font-variant-id "regular"
+   :font-size "14"
+   :font-weight "400"
+   :font-style "normal"
+   :line-height "1.2"
+   :letter-spacing "0"
+   :text-transform "none"
+   :text-align "left"
+   :text-decoration "none"})
+
 (defn- shape-current-values
   [shape pred attrs]
   (let [root  (:content shape)
-        nodes (nodes-seq pred root)]
+        nodes (->> (nodes-seq pred root)
+                   (map #(if (is-text-node? %)
+                           (merge default-text-attrs %)
+                           %)))]
     (geom/get-attrs-multi nodes attrs)))
 
 (defn current-text-values

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

@@ -15,14 +15,7 @@
    [app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
-   [app.main.ui.workspace.sidebar.options.text :refer [text-fill-attrs
+   [app.main.ui.workspace.sidebar.options.text :as ot]))
-                                                         text-font-attrs
-                                                         text-align-attrs
-                                                         text-spacing-attrs
-                                                         text-valign-attrs
-                                                         text-decoration-attrs
-                                                         text-transform-attrs
-                                                         text-menu]]))
 
 (defn get-shape-attrs
   [shape attrs text-attrs convert-attrs extract-fn]
@@ -47,88 +40,34 @@
         text-ids (map :id (filter #(= (:type %) :text) shapes))
         other-ids (map :id (filter #(not= (:type %) :text) shapes))
 
+        extract (fn [{:keys [attrs text-attrs convert-attrs extract-fn]}]
+                  (let [mapfn
+                        (fn [shape]
+                          (get-shape-attrs shape
+                                           attrs
+                                           text-attrs
+                                           convert-attrs
+                                           extract-fn))]
+                    (geom/get-attrs-multi (map mapfn shapes) (or attrs text-attrs))))
+
         measure-values
         (geom/get-attrs-multi shapes measure-attrs)
 
-        fill-values
+        fill-values (extract {:attrs fill-attrs
-        (geom/get-attrs-multi (map #(get-shape-attrs
+                              :text-attrs ot/text-fill-attrs
-                                      %
+                              :convert-attrs fill-attrs
-                                      fill-attrs
+                              :extract-fn dwt/current-text-values})
-                                      text-fill-attrs
-                                      fill-attrs
-                                      dwt/current-text-values)
-                                   shapes)
-                              fill-attrs)
 
-        stroke-values
+        stroke-values (extract {:attrs stroke-attrs})
-        (geom/get-attrs-multi (map #(get-shape-attrs
-                                      %
-                                      stroke-attrs
-                                      nil
-                                      nil
-                                      nil)
-                                   shapes)
-                              stroke-attrs)
 
-        font-values
+        root-values (extract {:text-attrs ot/root-attrs
-        (geom/get-attrs-multi (map #(get-shape-attrs
+                              :extract-fn dwt/current-root-values})
-                                      %
-                                      nil
-                                      text-font-attrs
-                                      nil
-                                      dwt/current-text-values)
-                                   shapes)
-                              text-font-attrs)
 
-        align-values
+        paragraph-values (extract {:text-attrs ot/paragraph-attrs
-        (geom/get-attrs-multi (map #(get-shape-attrs
+                                   :extract-fn dwt/current-paragraph-values})
-                                      %
-                                      nil
-                                      text-align-attrs
-                                      nil
-                                      dwt/current-paragraph-values)
-                                   shapes)
-                              text-align-attrs)
 
-        spacing-values
+        text-values (extract {:text-attrs ot/text-attrs
-        (geom/get-attrs-multi (map #(get-shape-attrs
+                              :extract-fn dwt/current-text-values})]
-                                      %
-                                      nil
-                                      text-spacing-attrs
-                                      nil
-                                      dwt/current-text-values)
-                                   shapes)
-                              text-spacing-attrs)
-
-        valign-values
-        (geom/get-attrs-multi (map #(get-shape-attrs
-                                      %
-                                      nil
-                                      text-valign-attrs
-                                      nil
-                                      dwt/current-root-values)
-                                   shapes)
-                              text-valign-attrs)
-
-        decoration-values
-        (geom/get-attrs-multi (map #(get-shape-attrs
-                                      %
-                                      nil
-                                      text-decoration-attrs
-                                      nil
-                                      dwt/current-text-values)
-                                   shapes)
-                              text-decoration-attrs)
-
-        transform-values
-        (geom/get-attrs-multi (map #(get-shape-attrs
-                                      %
-                                      nil
-                                      text-transform-attrs
-                                      nil
-                                      dwt/current-text-values)
-                                   shapes)
-                              text-transform-attrs)]
     [:*
      [:& measures-menu {:ids ids
                         :type :multiple
@@ -141,14 +80,11 @@
                         :type :multiple
                         :values stroke-values}])
      (when-not (empty? text-ids)
-       [:& text-menu {:ids text-ids
+       [:& ot/text-menu {:ids text-ids
                          :type :multiple
                          :editor nil
-                      :values (merge font-values
+                         :values (merge root-values
-                                     align-values
+                                        paragraph-values
-                                     spacing-values
+                                        text-values)
-                                     valign-values
-                                     decoration-values
-                                     transform-values)
                          :shapes shapes}])]))
 

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

@@ -89,7 +89,7 @@
 
         to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
 
-        grow-type (->> shapes (map :grow-type) (into #{}) to-single-value)
+        grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
 
         vertical-align (or vertical-align "top")
 
@@ -178,6 +178,7 @@
            editor
            values
            shapes] :as props}]
+
   (let [locale (mf/deref i18n/locale)
         typographies (mf/deref refs/workspace-file-typography)
         shared-libs (mf/deref refs/workspace-libraries)
@@ -202,12 +203,14 @@
 
         typography (cond
                      (and (:typography-ref-id values)
+                          (not= (:typography-ref-id values) :multiple)
                           (:typography-ref-file values))
                      (-> shared-libs
                          (get-in [(:typography-ref-file values) :data :typography (:typography-ref-id values)])
                          (assoc :file-id (:typography-ref-file values)))
 
-                     (:typography-ref-id values)
+                     (and (:typography-ref-id values)
+                          (not= (:typography-ref-id values) :multiple))
                      (get typographies (:typography-ref-id values)))
 
 
@@ -239,6 +242,7 @@
         opts #js {:editor editor
                   :ids ids
                   :values values
+                  :shapes shapes
                   :on-change (fn [attrs]
                                (run! #(emit-update! % attrs) ids))
                   :locale locale}]
@@ -248,10 +252,19 @@
       [:span label]
       [:div.add-page {:on-click handle-click} i/close]]
 
-     (if typography
+     (cond
+       typography
        [:& typography-entry {:typography typography
                              :on-deattach handle-deattach-typography
                              :on-change handle-change-typography}]
+
+       (= (:typography-ref-id values) :multiple)
+       [:div.multiple-typography
+        [:div.multiple-typography-text "Multiple typographies"]
+        [:div.multiple-typography-button {:on-click handle-deattach-typography
+                                          :title "Unlink all typographies"} i/unchain]]
+
+       :else
        [:> typography-options opts])
 
      [:div.element-set-content
@@ -277,7 +290,6 @@
         converted-fill-values {:fill-color (:fill fill-values)
                                :fill-opacity (:opacity fill-values)}
 
-
         text-values (merge
                      (dwt/current-root-values
                       {:editor editor :shape shape

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

@@ -98,7 +98,7 @@
 
      [:div.row-flex
       (let [size-options [8 9 10 11 12 14 18 24 36 48 72]
-            size-options (if (= font-size :multiple) (into [{:value "" :label "--"}] size-options) size-options)]
+            size-options (if (= font-size :multiple) (into [""] size-options) size-options)]
         [:& editable-select
          {:value (attr->string font-size)
           :class "input-option size-option"
@@ -108,9 +108,10 @@
           :on-change on-font-size-change}])
 
       [:select.input-select.variant-option
-       {:value (attr->string font-variant-id)
+       {:disabled (= font-id :multiple)
+        :value (attr->string font-variant-id)
         :on-change on-font-variant-change}
-       (when (= font-size :multiple)
+       (when (or (= font-id :multiple) (= font-variant-id :multiple))
          [:option {:value ""} "--"])
        (for [variant (:variants font)]
          [:option {:value (:id variant)