✨ Move text position calculation outside foreign object

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

@@ -0,0 +1,103 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.shapes.text.html-text
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.shapes.text.styles :as sts]
+   [app.util.object :as obj]
+   [rumext.alpha :as mf]))
+
+(mf/defc render-text
+  {::mf/wrap-props false}
+  [props]
+  (let [node   (obj/get props "node")
+        parent (obj/get props "parent")
+        shape  (obj/get props "shape")
+        text   (:text node)
+        style  (if (= text "")
+                 (sts/generate-text-styles shape parent)
+                 (sts/generate-text-styles shape node))]
+    [:span.text-node {:style style}
+     (if (= text "") "\u00A0" text)]))
+
+(mf/defc render-root
+  {::mf/wrap-props false}
+  [props]
+  (let [node     (obj/get props "node")
+        children (obj/get props "children")
+        shape    (obj/get props "shape")
+        style    (sts/generate-root-styles shape node)]
+    [:div.root.rich-text
+     {:style style
+      :xmlns "http://www.w3.org/1999/xhtml"}
+     children]))
+
+(mf/defc render-paragraph-set
+  {::mf/wrap-props false}
+  [props]
+  (let [children (obj/get props "children")
+        shape    (obj/get props "shape")
+        style    (sts/generate-paragraph-set-styles shape)]
+    [:div.paragraph-set {:style style} children]))
+
+(mf/defc render-paragraph
+  {::mf/wrap-props false}
+  [props]
+  (let [node     (obj/get props "node")
+        shape    (obj/get props "shape")
+        children (obj/get props "children")
+        style    (sts/generate-paragraph-styles shape node)
+        dir      (:text-direction node "auto")]
+    [:p.paragraph {:style style :dir dir} children]))
+
+;; -- Text nodes
+(mf/defc render-node
+  {::mf/wrap-props false}
+  [props]
+  (let [{:keys [type text children]} (obj/get props "node")]
+    (if (string? text)
+      [:> render-text props]
+      (let [component (case type
+                        "root" render-root
+                        "paragraph-set" render-paragraph-set
+                        "paragraph" render-paragraph
+                        nil)]
+        (when component
+          [:> component props
+           (for [[index node] (d/enumerate children)]
+             (let [props (-> (obj/clone props)
+                             (obj/set! "node" node)
+                             (obj/set! "index" index)
+                             (obj/set! "key" index))]
+               [:> render-node props]))])))))
+
+(mf/defc text-shape
+  {::mf/wrap-props false
+   ::mf/forward-ref true}
+  [props ref]
+  (let [shape     (obj/get props "shape")
+        grow-type (obj/get props "grow-type")
+        {:keys [id x y width height content]} shape]
+
+    [:div.text-node-html
+     {:id (dm/str "html-text-node-" id)
+      :ref ref
+      :data-x x
+      :data-y y
+      :style {:position "fixed"
+              :left 0
+              :top 0
+              :width  (if (#{:auto-width} grow-type) 100000 width)
+              :height (if (#{:auto-height :auto-width} grow-type) 100000 height)}}
+     ;; We use a class here because react has a bug that won't use the appropriate selector for
+     ;; `background-clip`
+     [:style ".text-node { background-clip: text;
+                           -webkit-background-clip: text;" ]
+     [:& render-node {:index 0
+                      :shape shape
+                      :node content}]]))

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

@@ -11,7 +11,6 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
-   [app.config :as cfg]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]]
@@ -87,12 +86,10 @@
 
      [:> :g group-props
       (for [[index data] (d/enumerate position-data)]
-        (let [y (if (cfg/check-browser? :safari)
+        (let [y (- (:y data) (:height data))
-                  (- (:y data) (:height data))
+              dominant-bl (when-not (cfg/check-browser? :safari) "text-before-edge")
-                  (:y data))
-
               alignment-bl (when (cfg/check-browser? :safari) "text-before-edge")
-              dominant-bl (when-not (cfg/check-browser? :safari) "ideographic")
+
               rtl? (= "rtl" (:direction data))
               props (-> #js {:key (dm/str "text-" (:id shape) "-" index)
                              :x (if rtl? (+ (:x data) (:width data)) (:x data))
@@ -115,4 +112,3 @@
           [:& (mf/provider muc/render-ctx) {:key index :value (str render-id "_" (:id shape) "_" index)}
            [:& shape-custom-strokes {:shape shape :position index :render-id render-id}
             [:> :text props (:text data)]]]))]]))
-

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

@@ -66,7 +66,7 @@
   [{:keys [grow-type id migrate] :as shape} node]
   ;; Check if we need to update the size because it's auto-width or auto-height
   ;; Update the position-data of every text fragment
-  (p/let [position-data (tsp/calc-position-data node)]
+  (p/let [position-data (tsp/calc-position-data id)]
     ;; At least one paragraph needs to be inside the bounding box
     (when (gsht/overlaps-position-data? shape position-data)
       (st/emit! (dwt/update-position-data id position-data)))
@@ -85,7 +85,7 @@
 
 (defn- update-text-modifier
   [{:keys [grow-type id]} node]
-  (p/let [position-data (tsp/calc-position-data node)
+  (p/let [position-data (tsp/calc-position-data id)
           props {:position-data position-data}
 
           props

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

@@ -0,0 +1,258 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.workspace.shapes.text.viewport-texts-html
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.text :as gsht]
+   [app.common.math :as mth]
+   [app.common.pages.helpers :as cph]
+   [app.common.text :as txt]
+   [app.main.data.workspace.texts :as dwt]
+   [app.main.fonts :as fonts]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.hooks :as hooks]
+   [app.main.ui.shapes.text.html-text :as html]
+   [app.util.dom :as dom]
+   [app.util.object :as obj]
+   [app.util.text-editor :as ted]
+   [app.util.text-svg-position :as tsp]
+   [app.util.timers :as ts]
+   [promesa.core :as p]
+   [rumext.alpha :as mf]))
+
+(defn strip-position-data [shape]
+  (dissoc shape :position-data :transform :transform-inverse))
+
+(defn strip-modifier
+  [modifier]
+  (if (or (some? (dm/get-in modifier [:modifiers :resize-vector]))
+          (some? (dm/get-in modifier [:modifiers :resize-vector-2])))
+    modifier
+    (d/update-when modifier :modifiers dissoc :displacement :rotation)))
+
+(defn process-shape [modifiers {:keys [id] :as shape}]
+  (let [modifier (-> (get modifiers id) strip-modifier)
+        shape (cond-> shape
+                (not (gsh/empty-modifiers? (:modifiers modifier)))
+                (-> (assoc :grow-type :fixed)
+                    (merge modifier) gsh/transform-shape))]
+    (-> shape
+        (cond-> (nil? (:position-data shape))
+          (assoc :migrate true))
+        strip-position-data)))
+
+(defn- update-with-editor-state
+  "Updates the shape with the current state in the editor"
+  [shape editor-state]
+  (let [content (:content shape)
+        editor-content
+        (when editor-state
+          (-> editor-state
+              (ted/get-editor-current-content)
+              (ted/export-content)))]
+
+    (cond-> shape
+      (and (some? shape) (some? editor-content))
+      (assoc :content (d/txt-merge content editor-content)))))
+
+(defn- update-text-shape
+  [{:keys [grow-type id migrate] :as shape} node]
+  ;; Check if we need to update the size because it's auto-width or auto-height
+  ;; Update the position-data of every text fragment
+  (p/let [position-data (tsp/calc-position-data id)]
+    ;; At least one paragraph needs to be inside the bounding box
+    (when (gsht/overlaps-position-data? shape position-data)
+      (st/emit! (dwt/update-position-data id position-data)))
+
+    (when (contains? #{:auto-height :auto-width} grow-type)
+      (let [{:keys [width height]}
+            (-> (dom/query node ".paragraph-set")
+                (dom/get-client-size))
+            width (mth/ceil width)
+            height (mth/ceil height)]
+        (when (and (not (mth/almost-zero? width))
+                   (not (mth/almost-zero? height))
+                   (not migrate))
+          (st/emit! (dwt/resize-text id width height)))))
+    (st/emit! (dwt/clean-text-modifier id))))
+
+(defn- update-text-modifier
+  [{:keys [grow-type id]} node]
+  (p/let [position-data (tsp/calc-position-data id)
+          props {:position-data position-data}
+
+          props
+          (if (contains? #{:auto-height :auto-width} grow-type)
+            (let [{:keys [width height]} (-> (dom/query node ".paragraph-set") (dom/get-client-size))
+                  width (mth/ceil width)
+                  height (mth/ceil height)]
+              (if (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height)))
+                (assoc props :width width :height height)
+                props))
+            props)]
+
+    (st/emit! (dwt/update-text-modifier id props))))
+
+(mf/defc text-container
+  {::mf/wrap-props false
+   ::mf/wrap [mf/memo]}
+  [props]
+  (let [shape       (obj/get props "shape")
+        on-update   (obj/get props "on-update")
+
+        handle-update
+        (mf/use-callback
+         (mf/deps shape on-update)
+         (fn [node]
+           (when (some? node)
+             (on-update shape node))))]
+
+    [:& html/text-shape {:key (str "shape-" (:id shape))
+                         :ref handle-update
+                         :shape shape
+                         :grow-type (:grow-type shape)}]))
+
+(mf/defc viewport-texts-wrapper
+  {::mf/wrap-props false
+   ::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
+  [props]
+  (let [text-shapes (obj/get props "text-shapes")
+        modifiers (obj/get props "modifiers")
+        prev-modifiers (hooks/use-previous modifiers)
+        prev-text-shapes (hooks/use-previous text-shapes)
+
+        ;; A change in position-data won't be a "real" change
+        text-change?
+        (fn [id]
+          (let [old-shape (get prev-text-shapes id)
+                new-shape (get text-shapes id)
+                old-modifiers (-> (get prev-modifiers id) strip-modifier)
+                new-modifiers (-> (get modifiers id) strip-modifier)]
+
+            (or (and (not (identical? old-shape new-shape))
+                     (not= (dissoc old-shape :migrate :position-data)
+                           (dissoc new-shape :migrate :position-data)))
+                (not= new-modifiers old-modifiers)
+
+                ;; When the position data is nil we force to recalculate
+                (:migrate new-shape))))
+
+        changed-texts
+        (mf/use-memo
+         (mf/deps text-shapes modifiers)
+         #(->> (keys text-shapes)
+               (filter text-change?)
+               (map (d/getf text-shapes))))
+
+        handle-update-modifier (mf/use-callback update-text-modifier)
+        handle-update-shape (mf/use-callback update-text-shape)]
+
+    [:*
+     (for [{:keys [id] :as shape} changed-texts]
+       [:& text-container {:shape (gsh/transform-shape shape)
+                           :on-update (if (some? (get modifiers (:id shape)))
+                                        handle-update-modifier
+                                        handle-update-shape)
+                           :key (str (dm/str "text-container-" id))}])]))
+
+(mf/defc viewport-text-editing
+  {::mf/wrap-props false}
+  [props]
+
+  (let [shape   (obj/get props "shape")
+
+        ;; Join current objects with the state of the editor
+        editor-state
+        (-> (mf/deref refs/workspace-editor-state)
+            (get (:id shape)))
+
+        text-modifier-ref
+        (mf/use-memo (mf/deps (:id shape)) #(refs/workspace-text-modifier-by-id (:id shape)))
+
+        text-modifier
+        (mf/deref text-modifier-ref)
+
+        shape (cond-> shape
+                (some? editor-state)
+                (update-with-editor-state editor-state))
+
+        ;; When we have a text with grow-type :auto-height we need to check the correct height
+        ;; otherwise the center alignment will break
+        shape
+        (if (or (not= :auto-height (:grow-type shape)) (empty? text-modifier))
+          shape
+          (let [tr-shape (dwt/apply-text-modifier shape text-modifier)]
+            (cond-> shape
+              ;; we only change the height otherwise could cause problems with the other fields
+              (some? text-modifier)
+              (assoc  :height (:height tr-shape)))))
+
+        shape (hooks/use-equal-memo shape)
+
+        handle-update-shape (mf/use-callback update-text-modifier)]
+
+    (mf/use-effect
+     (mf/deps (:id shape))
+     (fn []
+       #(st/emit! (dwt/remove-text-modifier (:id shape)))))
+
+    [:& text-container {:shape shape
+                        :on-update handle-update-shape}]))
+
+(defn check-props
+  [new-props old-props]
+  (and (identical? (unchecked-get new-props "objects")
+                   (unchecked-get old-props "objects"))
+       (identical? (unchecked-get new-props "modifiers")
+                   (unchecked-get old-props "modifiers"))
+       (= (unchecked-get new-props "edition")
+          (unchecked-get old-props "edition"))))
+
+(mf/defc viewport-texts
+  {::mf/wrap-props false
+   ::mf/wrap [#(mf/memo' % check-props)]}
+  [props]
+  (let [objects   (obj/get props "objects")
+        edition   (obj/get props "edition")
+        modifiers (obj/get props "modifiers")
+
+        text-shapes
+        (mf/use-memo
+         (mf/deps objects)
+         #(into {} (filter (comp cph/text-shape? second)) objects))
+
+        text-shapes
+        (mf/use-memo
+         (mf/deps text-shapes modifiers)
+         #(d/update-vals text-shapes (partial process-shape modifiers)))
+
+        editing-shape (get text-shapes edition)
+
+        ;; This memo is necesary so the viewport-text-wrapper memoize its props correctly
+        text-shapes-wrapper
+        (mf/use-memo
+         (mf/deps text-shapes edition)
+         (fn []
+           (dissoc text-shapes edition)))]
+
+    ;; We only need the effect to run on "mount" because the next fonts will be changed when the texts are
+    ;; edited
+    (mf/use-effect
+     (fn []
+       (let [text-nodes (->> text-shapes (vals)(mapcat #(txt/node-seq txt/is-text-node? (:content %))))
+             fonts (into #{} (keep :font-id) text-nodes)]
+         (run! fonts/ensure-loaded! fonts))))
+
+    [:*
+     (when editing-shape
+       [:& viewport-text-editing {:shape editing-shape}])
+
+     [:& viewport-texts-wrapper {:text-shapes text-shapes-wrapper
+                                 :modifiers modifiers}]]))

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

@@ -21,6 +21,7 @@
    [app.main.ui.workspace.shapes.text.editor :as editor]
    [app.main.ui.workspace.shapes.text.text-edition-outline :refer [text-edition-outline]]
    [app.main.ui.workspace.shapes.text.viewport-texts :as stv]
+   [app.main.ui.workspace.shapes.text.viewport-texts-html :as stvh]
    [app.main.ui.workspace.viewport.actions :as actions]
    [app.main.ui.workspace.viewport.comments :as comments]
    [app.main.ui.workspace.viewport.drawarea :as drawarea]
@@ -194,6 +195,13 @@
 
     [: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}]]
 
       (when show-comments?
         [:& comments/comments-layer {:vbox vbox
@@ -236,23 +244,6 @@
                                :objects base-objects
                                :active-frames @active-frames}]]]]
 
-     [:svg.render-shapes
-      {:id "text-position-layer"
-       :xmlns "http://www.w3.org/2000/svg"
-       :xmlnsXlink "http://www.w3.org/1999/xlink"
-       :preserveAspectRatio "xMidYMid meet"
-       :key (str "text-position-layer" page-id)
-       :width (:width vport 0)
-       :height (:height vport 0)
-       :view-box (utils/format-viewbox vbox)}
-
-      [:g {:pointer-events "none" :opacity 0}
-       [:& stv/viewport-texts {:key (dm/str "texts-" page-id)
-                               :page-id page-id
-                               :objects objects
-                               :modifiers modifiers
-                               :edition edition}]]]
-
      [:svg.viewport-controls
       {:xmlns "http://www.w3.org/2000/svg"
        :xmlnsXlink "http://www.w3.org/1999/xlink"

frontend/src/app/util/dom.cljs

@@ -128,6 +128,14 @@
   (when (some? node)
     (.-parentElement ^js node)))
 
+(defn get-parent-with-selector
+  [^js node selector]
+
+  (loop [current node]
+    (if (or (nil? current) (.matches current selector) )
+      current
+      (recur (.-parentElement current)))))
+
 (defn get-value
   "Extract the value from dom node."
   [^js node]

frontend/src/app/util/text_svg_position.cljs

@@ -8,10 +8,8 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.geom.point :as gpt]
    [app.common.transit :as transit]
    [app.main.fonts :as fonts]
-   [app.main.store :as st]
    [app.util.dom :as dom]
    [app.util.text-position-data :as tpd]
    [promesa.core :as p]))
@@ -59,78 +57,54 @@
         (p/then #(when (not (dom/check-font? font))
                    (load-font font))))))
 
-(defn calc-text-node-positions
+(defn- calc-text-node-positions
-  [base-node viewport zoom]
+  [shape-id]
 
-  (when (and (some? base-node)(some? viewport))
+  (when (some? shape-id)
-    (let [translate-point
+    (let [text-nodes (dom/query-all (dm/str "#html-text-node-" shape-id " .text-node"))
-          (fn [pt]
+          load-fonts (->> text-nodes (map resolve-font))
-            (let [vbox     (.. ^js viewport -viewBox -baseVal)
-                  brect    (dom/get-bounding-rect viewport)
-                  brect    (gpt/point (d/parse-integer (:left brect))
-                                      (d/parse-integer (:top brect)))
-                  box      (gpt/point (.-x vbox) (.-y vbox))
-                  zoom     (gpt/point zoom)]
-              
-              (-> (gpt/subtract pt brect)
-                  (gpt/divide zoom)
-                  (gpt/add box))))
 
-          translate-rect
+          process-text-node
-          (fn [{:keys [x y width height] :as rect}]
+          (fn [parent-node]
-            (let [p1 (-> (gpt/point x y)
+            (let [root (dom/get-parent-with-selector parent-node ".text-node-html")
-                         (translate-point))
+                  shape-x (-> (dom/get-attribute root "data-x") d/parse-double)
-
+                  shape-y (-> (dom/get-attribute root "data-y") d/parse-double)
-                  p2 (-> (gpt/point (+ x width) (+ y height))
+                  direction (.-direction (js/getComputedStyle parent-node))]
-                         (translate-point))]
+              (->> (.-childNodes parent-node)
-              (assoc rect
+                   (mapcat #(parse-text-nodes parent-node direction %))
-                     :x (:x p1)
+                   (mapv #(-> %
-                     :y (:y p1)
+                              (update-in [:position :x] + shape-x)
-                     :width (- (:x p2) (:x p1))
+                              (update-in [:position :y] + shape-y))))))]
-                     :height (- (:y p2) (:y p1)))))
-
-          text-nodes (dom/query-all base-node ".text-node, span[data-text]")
-          load-fonts (->> text-nodes (map resolve-font))]
       (-> (p/all load-fonts)
           (p/then
            (fn []
-             (->> text-nodes
+             (->> text-nodes (mapcat process-text-node))))))))
-                  (mapcat
-                   (fn [parent-node]
-                     (let [direction (.-direction (js/getComputedStyle parent-node))]
-                       (->> (.-childNodes parent-node)
-                            (mapcat #(parse-text-nodes parent-node direction %))))))
-                  (mapv #(update % :position translate-rect)))))))))
 
 (defn calc-position-data
-  [base-node]
+  [shape-id]
-  (let [viewport      (dom/get-element "render")
+  (when (some? shape-id)
-        zoom          (or (get-in @st/state [:workspace-local :zoom]) 1)]
+    (p/let [text-data (calc-text-node-positions shape-id)]
-    (when (and (some? base-node) (some? viewport))
+      (when (d/not-empty? text-data)
-      (p/let [text-data (calc-text-node-positions base-node viewport zoom)]
+        (->> text-data
-        (when (d/not-empty? text-data)
+             (mapv (fn [{:keys [node position text direction]}]
-          (->> text-data
+                     (let [{:keys [x y width height]} position
-               (mapv (fn [{:keys [node position text direction]}]
+                           styles (js/getComputedStyle ^js node)
-                       (let [{:keys [x y width height]} position
+                           get    (fn [prop]
-                             styles (js/getComputedStyle ^js node)
+                                    (let [value (.getPropertyValue styles prop)]
-                             get    (fn [prop]
+                                      (when (and value (not= value ""))
-                                      (let [value (.getPropertyValue styles prop)]
+                                        value)))]
-                                        (when (and value (not= value ""))
+                       (d/without-nils
-                                          value)))]
+                        {:x                   x
-                         (d/without-nils
+                         :y                   (+ y height)
-                          {:x                   x
+                         :width               width
-                           :y                   (+ y height)
+                         :height              height
-                           :width               width
+                         :direction           direction
-                           :height              height
+                         :font-family         (str (get "font-family"))
-                           :direction           direction
+                         :font-size           (str (get "font-size"))
-                           :font-family         (str (get "font-family"))
+                         :font-weight         (str (get "font-weight"))
-                           :font-size           (str (get "font-size"))
+                         :text-transform      (str (get "text-transform"))
-                           :font-weight         (str (get "font-weight"))
+                         :text-decoration     (str (get "text-decoration"))
-                           :text-transform      (str (get "text-transform"))
+                         :letter-spacing      (str (get "letter-spacing"))
-                           :text-decoration     (str (get "text-decoration"))
+                         :font-style          (str (get "font-style"))
-                           :letter-spacing      (str (get "letter-spacing"))
+                         :fills               (transit/decode-str (get "--fills"))
-                           :font-style          (str (get "font-style"))
+                         :text                text})))))))))
-                           :fills               (transit/decode-str (get "--fills"))
-                           :text                text}))))))))))
-
-