🐛 Fix problem with text displacement in Safari

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

@@ -51,8 +51,8 @@
      [:> :g group-props
       (for [[index data] (d/enumerate position-data)]
         (let [props (-> #js {:x (mth/round (:x data))
-                             :y (mth/round (:y data))
+                             :y (mth/round (- (:y data) (:height data)))
-                             :dominantBaseline "ideographic"
+                             :alignmentBaseline "text-before-edge"
                              :style (-> #js {:fontFamily (:font-family data)
                                              :fontSize (:font-size data)
                                              :fontWeight (:font-weight data)

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

@@ -27,6 +27,7 @@
    [app.util.timers :as timers]
    [app.util.webapi :as wapi]
    [beicon.core :as rx]
+   [debug :refer [debug?]]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
 
@@ -224,4 +225,22 @@
 
       (when show-svg-text?
         [:g.text-svg {:pointer-events "none"}
-         [:& svg/text-shape {:shape shape}]])]]))
+         [:& svg/text-shape {:shape shape}]])
+
+      (when (debug? :text-outline)
+        (for [data (:position-data shape)]
+          (let [{:keys [x y width height]} data]
+            [:*
+             ;; Text fragment bounding box
+             [:rect {:x x
+                     :y (- y height)
+                     :width width
+                     :height height
+                     :style {:fill "none" :stroke "red"}}]
+
+             ;; Text baselineazo
+             [:line {:x1 (mth/round x)
+                     :y1 (mth/round (- (:y data) (:height data)))
+                     :x2 (mth/round (+ x width))
+                     :y2 (mth/round (- (:y data) (:height data)))
+                     :style {:stroke "blue"}}]])))]]))

frontend/src/debug.cljs

@@ -46,6 +46,9 @@
 
     ;; When active we can check in the browser the export values
     :show-export-metadata
+
+    ;; Show text fragments outlines
+    :text-outline
     })
 
 ;; These events are excluded when we activate the :events flag