Merge pull request #2204 from penpot/alotor-bugfixes

🐛 Fix problems with texts

CHANGES.md

@@ -6,13 +6,9 @@
 ### :bug: Bugs fixed
 
 - Fix shadows doesn't work on nested artboards [Taiga #3886](https://tree.taiga.io/project/penpot/issue/3886)
-
-
-## 1.15.0-beta
-
-### :bug: Bugs fixed
-
 - Fix problems with double-click and selection [Taiga #4005](https://tree.taiga.io/project/penpot/issue/4005)
+- Fix mismatch between editor and displayed text in workspace [Taiga #3975](https://tree.taiga.io/project/penpot/issue/3975)
+- Fix validation error on text position [Taiga #4010](https://tree.taiga.io/project/penpot/issue/4010)
 
 ## 1.15.0-beta
 

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

@@ -268,8 +268,7 @@
         text-modifier
         (mf/deref text-modifier-ref)
 
-        bounding-box
-        (gsht/position-data-bounding-box text-modifier)
+        bounding-box (gsht/position-data-bounding-box (or text-modifier shape))
 
         x      (min (:x bounding-box) (:x shape))
         y      (min (:y bounding-box) (:y shape))
@@ -280,15 +279,15 @@
                      :transform (dm/str (gsh/transform-matrix shape))}
      [:defs
       [:clipPath {:id clip-id}
-       [:rect {:x (or x (:x shape))
-               :y (or y (:y shape))
-               :width (or width (:width shape))
-               :height (or height (:height shape))
+       [:rect {:x x
+               :y y
+               :width width
+               :height height
                :fill "red"}]]]
 
-     [:foreignObject {:x (:x shape) :y (:y shape) :width width :height height}
+     [:foreignObject {:x x :y y :width width :height height}
       [:div {:style {:position "absolute"
                      :left 0
-                     :top  0
+                     :top  (- (:y shape) y)
                      :pointer-events "all"}}
        [:& text-shape-edit-html {:shape shape :key (str (:id shape))}]]]]))

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

@@ -194,13 +194,17 @@
 
     [:div.viewport
      [:div.viewport-overlays {:ref overlays-ref}
-      [:div {:style {:pointer-events "none" :opacity 0}}
-       [:& stvh/viewport-texts
-        {:key (dm/str "texts-" page-id)
-         :page-id page-id
-         :objects objects
-         :modifiers modifiers
-         :edition edition}]]
+      ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
+      ;; inside a foreign object "dummy" so this awkward behaviour is take into account
+      [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity 0}}
+       [:foreignObject {:x 0 :y 0 :width "100%" :height "100%"}
+        [:div {:style {:pointer-events "none"}}
+         [:& stvh/viewport-texts
+          {:key (dm/str "texts-" page-id)
+           :page-id page-id
+           :objects objects
+           :modifiers modifiers
+           :edition edition}]]]]
 
       (when show-comments?
         [:& comments/comments-layer {:vbox vbox

frontend/src/app/util/dom.cljs

@@ -332,10 +332,10 @@
 (defn bounding-rect->rect
   [rect]
   (when (some? rect)
-    {:x      (or (.-left rect)   (:left rect))
-     :y      (or (.-top rect)    (:top rect))
-     :width  (or (.-width rect)  (:width rect))
-     :height (or (.-height rect) (:height rect))}))
+    {:x      (or (.-left rect)   (:left rect)   0)
+     :y      (or (.-top rect)    (:top rect)    0)
+     :width  (or (.-width rect)  (:width rect)  1)
+     :height (or (.-height rect) (:height rect) 1)}))
 
 (defn get-window-size
   []

frontend/src/app/util/text_svg_position.cljs

@@ -19,13 +19,14 @@
   [parent-node direction text-node]
 
   (letfn [(parse-entry [^js entry]
-            {:node      (.-node entry)
-             :position  (dom/bounding-rect->rect (.-position entry))
-             :text      (.-text entry)
-             :direction direction})]
+            (when (some? (.-position entry))
+              {:node      (.-node entry)
+               :position  (dom/bounding-rect->rect (.-position entry))
+               :text      (.-text entry)
+               :direction direction}))]
     (into
      []
-     (map parse-entry)
+     (keep parse-entry)
      (tpd/parse-text-nodes parent-node text-node))))
 
 (def load-promises (atom {}))