✨ Adds borders to SVG texts

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

@@ -189,9 +189,8 @@
    (let [svg-defs  (:svg-defs shape {})
          svg-attrs (:svg-attrs shape {})
 
-         [svg-attrs svg-styles] (mf/use-memo
+         [svg-attrs svg-styles]
-                                 (mf/deps render-id svg-defs svg-attrs)
+         (extract-svg-attrs render-id svg-defs svg-attrs)
-                                 #(extract-svg-attrs render-id svg-defs svg-attrs))
 
          styles (-> (obj/get props "style" (obj/new))
                     (obj/merge! svg-styles)

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

@@ -97,10 +97,10 @@
 (mf/defc gradient
   {::mf/wrap-props false}
   [props]
-  (let [attr (obj/get props "attr")
+  (let [attr   (obj/get props "attr")
-        shape (obj/get props "shape")
+        shape  (obj/get props "shape")
-        render-id (mf/use-ctx muc/render-ctx)
+        id     (obj/get props "id")
-        id (str (name attr) "_" render-id)
+        id     (or id (str (name attr) "_" (mf/use-ctx muc/render-ctx)))
         gradient (get shape attr)
         gradient-props #js {:id id
                             :gradient gradient

frontend/src/app/main/ui/shapes/text/fo_text.cljs

@@ -9,6 +9,7 @@
    [app.common.colors :as clr]
    [app.common.data :as d]
    [app.common.geom.shapes :as geom]
+   [app.common.transit :as transit]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.text.styles :as sts]
@@ -23,7 +24,12 @@
   (let [node  (obj/get props "node")
         text  (:text node)
         style (sts/generate-text-styles node)]
-    [:span.text-node {:style style}
+    [:span.text-node {:style style
+                      :data-fill-color (:fill-color node)
+                      :data-fill-color-gradient (transit/encode-str (:fill-color-gradient node))
+                      :data-fill-color-ref-file (transit/encode-str (:fill-color-ref-file node))
+                      :data-fill-color-ref-id (transit/encode-str (:fill-color-ref-id node))
+                      :data-fill-opacity (:fill-opacity node)}
      (if (= text "") "\u00A0" text)]))
 
 (mf/defc render-root

frontend/src/app/main/ui/shapes/text/svg_text.cljs

@@ -6,40 +6,52 @@
 
 (ns app.main.ui.shapes.text.svg-text
   (:require
-   [app.common.geom.matrix :as gmt]
+   [app.common.data :as d]
    [app.common.geom.shapes :as gsh]
-   [app.main.store :as st]
+   [app.main.ui.context :as muc]
+   [app.main.ui.shapes.attrs :as attrs]
+   [app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
+   [app.main.ui.shapes.gradients :as grad]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
+(def fill-attrs [:fill-color :fill-color-gradient :fill-opacity])
+
 (mf/defc text-shape
   {::mf/wrap-props false
    ::mf/wrap [mf/memo]}
   [props]
   
-  (let [{:keys [x y width height position-data] :as shape} (obj/get props "shape")
+  (let [render-id (mf/use-ctx muc/render-ctx)
-        zoom (or (get-in @st/state [:workspace-local :zoom]) 1)]
+        {:keys [position-data] :as shape} (obj/get props "shape")
-    [:text {:x x
+        group-props (-> #js {:transform (gsh/transform-matrix shape)}
-            :y y
+                       (attrs/add-style-attrs shape render-id))
-            :width width
+        get-gradient-id
-            :height height
+        (fn [index]
-            :dominant-baseline "ideographic"
+          (str render-id "_" (:id shape) "_" index))]
-            :transform (gsh/transform-matrix shape)
+    [:*
-            }
+     ;; Definition of gradients for partial elements
-     (for [data position-data]
+     (when (d/seek :fill-color-gradient position-data)
-       [:tspan {:x (:x data)
+       [:defs
-                :y (:y data)
+        (for [[index data] (d/enumerate position-data)]
-                :transform (:transform-inverse shape (gmt/matrix))
+          (when (some? (:fill-color-gradient data))
-                :style {:fill "black"
+            [:& grad/gradient {:id (str "fill-color-gradient_" (get-gradient-id index))
-                        :fill-opacity 1
+                               :attr :fill-color-gradient
-                        :stroke "red"
+                               :shape data}]))])
-                        :stroke-width (/ 0.5 zoom)
+
-                        :font-family (:font-family data)
+     [:& shape-custom-stroke {:shape shape}
-                        :font-size (:font-size data)
+      [:> :g group-props
-                        :font-weight (:font-weight data)
+       (for [[index data] (d/enumerate position-data)]
-                        :text-transform (:text-transform data)
+         (let [props (-> #js {:x (:x data)
-                        :text-decoration (:text-decoration data)
+                              :y (:y data)
-                        :font-style (:font-style data)
+                              :dominant-baseline "ideographic"
-                        :direction (if (:rtl? data) "rtl" "ltr")
+                              :style (-> #js {:fontFamily (:font-family data)
-                        :white-space "pre"}}
+                                              :fontSize (:font-size data)
-        (:text data)])]))
+                                              :fontWeight (:font-weight data)
+                                              :textTransform (:text-transform data)
+                                              :textDecoration (:text-decoration data)
+                                              :fontStyle (:font-style data)
+                                              :direction (if (:rtl? data) "rtl" "ltr")
+                                              :whiteSpace "pre"}
+                                         (attrs/add-fill data (get-gradient-id index)))})]
+           [:> :text props (:text data)]))]]]))

frontend/src/app/main/ui/workspace/shapes/text.cljs

@@ -6,8 +6,10 @@
 
 (ns app.main.ui.workspace.shapes.text
   (:require
+   [app.common.data :as d]
    [app.common.logging :as log]
    [app.common.math :as mth]
+   [app.common.transit :as transit]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
@@ -126,18 +128,22 @@
                            (let [{:keys [x y width height]} position
                                  rtl? (= "rtl" (.-dir (.-parentElement ^js node)))
                                  styles (.computedStyleMap ^js node)]
-                             {:rtl? rtl?
+                             (d/without-nils
-                              :x    (if rtl? (+ x width) x)
+                              {:rtl? rtl?
-                              :y    (+ y height)
+                               :x    (if rtl? (+ x width) x)
-                              :width width
+                               :y    (+ y height)
-                              :height height
+                               :width width
-                              :font-family (str (.get styles "font-family"))
+                               :height height
-                              :font-size (str (.get styles "font-size"))
+                               :font-family (str (.get styles "font-family"))
-                              :font-weight (str (.get styles "font-weight"))
+                               :font-size (str (.get styles "font-size"))
-                              :text-transform (str (.get styles "text-transform"))
+                               :font-weight (str (.get styles "font-weight"))
-                              :text-decoration (str (.get styles "text-decoration"))
+                               :text-transform (str (.get styles "text-transform"))
-                              :font-style (str (.get styles "font-style"))
+                               :text-decoration (str (.get styles "text-decoration"))
-                              :text text}))))]
+                               :font-style (str (.get styles "font-style"))
+                               :fill-color (or (dom/get-attribute node "data-fill-color") "#000000")
+                               :fill-color-gradient (transit/decode-str (dom/get-attribute node "data-fill-color-gradient"))
+                               :fill-opacity (d/parse-double (or (:fill-opacity node) "1"))
+                               :text text})))))]
            (st/emit! (dch/update-shapes
                       [id]
                       (fn [shape]
@@ -162,7 +168,7 @@
                                 :edition? edition?
                                 :key (str id edition?)}]]
 
-      [:g {:opacity (when edition? 0)
+      [:g.text-svg {:opacity (when edition? 0)
-           :pointer-events "none"}
+                    :pointer-events "none"}
        (when (some? (:position-data shape))
          [:& svg/text-shape {:shape shape}])]]]))

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

@@ -16,6 +16,7 @@
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
    [app.main.ui.workspace.sidebar.options.menus.text :refer [text-menu text-fill-attrs root-attrs paragraph-attrs text-attrs]]
    [rumext.alpha :as mf]))
 
@@ -43,6 +44,8 @@
                       (:fill fill-values) (assoc :fill-color (:fill fill-values))
                       (:opacity fill-values) (assoc :fill-opacity (:fill fill-values)))
 
+        stroke-values (select-keys shape stroke-attrs)
+
         text-values (d/merge
                      (select-keys shape [:grow-type])
                      (select-keys shape fill-attrs)
@@ -79,6 +82,10 @@
        :values fill-values
        :disable-remove? true}]
 
+     [:& stroke-menu {:ids ids
+                      :type type
+                      :values stroke-values}]
+
      [:& shadow-menu
       {:ids ids
        :values (select-keys shape [:shadow])}]

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

@@ -206,7 +206,8 @@
        :style {:background-color background
                :pointer-events "none"}}
 
-      [:& use/export-page {:options options}]
+      (when (debug? :show-export-metadata)
+        [:& use/export-page {:options options}])
 
       [:& (mf/provider use/include-metadata-ctx) {:value (debug? :show-export-metadata)}
        [:& (mf/provider embed/context) {:value true}