✨ Changed update text flow

common/src/app/common/geom/shapes/transforms.cljc

@@ -43,7 +43,7 @@
   [position-data dx dy]
 
   (->> position-data
-       (map #(-> %
+       (mapv #(-> %
                   (update :x + dx)
                   (update :y + dy)))))
 
@@ -542,8 +542,7 @@
 
        :else
        (let [shape     (apply-displacement shape)
-             modifiers (:modifiers shape)
+             modifiers (:modifiers shape)]
-             shape (cond-> shape (= :text (:type shape)) (assoc :dirty? true))]
          (cond-> shape
            (not (empty-modifiers? modifiers))
            (-> (set-flip modifiers)

frontend/resources/styles/main/partials/texts.scss

@@ -3,7 +3,6 @@
 .rich-text {
   color: $color-black;
   height: 100%;
-  white-space: pre-wrap;
   font-family: sourcesanspro;
 
   div {

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

@@ -65,7 +65,7 @@
                (when (and (not= content (:content shape))
                           (some? (:current-page-id state)))
                  (rx/of
-                  (dch/update-shapes [id] #(assoc % :content content :dirty? true))
+                  (dch/update-shapes [id] #(assoc % :content content))
                   (dwu/commit-undo-transaction)))))
 
             (when (some? id)
@@ -150,8 +150,7 @@
   (let [merge-attrs #(merge-fn % attrs)
         transform   #(txt/transform-nodes pred-fn merge-attrs %)]
     (-> shape
-        (update :content transform)
+        (update :content transform))))
-        (assoc :dirty? true))))
 
 (defn update-root-attrs
   [{:keys [id attrs]}]

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

@@ -185,7 +185,7 @@
                           :transform
                           :transform-inverse
                           :rotation
-                          :dirty?
+                          :position-data
                           :flip-x
                           :flip-y]})
                (clear-local-transform)

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

@@ -81,7 +81,8 @@
                              :textTransform text-transform
                              :lineHeight (or line-height "inherit")
                              :color "transparent"
-                             :caretColor (or text-color "black")}
+                             :caretColor (or text-color "black")
+                             :overflowWrap "initial"}
 
         base (-> base
                  (obj/set! "--fill-color" fill-color)

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

@@ -123,7 +123,7 @@
 (mf/defc text-wrapper
   {::mf/wrap-props false}
   [props]
-  (let [{:keys [id dirty?] :as shape} (unchecked-get props "shape")
+  (let [{:keys [id content points] :as shape} (unchecked-get props "shape")
         edition-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
         edition?    (mf/deref edition-ref)
 
@@ -131,9 +131,8 @@
 
         handle-change-foreign-object
         (fn [node]
-          (when (some? node)
+          (when-let [position-data (utp/calc-position-data node)]
-            (let [position-data (utp/calc-position-data node)
+            (let [parent (dom/get-parent node)
-                  parent (dom/get-parent node)
                   parent-transform (dom/get-attribute parent "transform")
                   node-transform (dom/get-attribute node "transform")
 
@@ -153,24 +152,27 @@
 
         [shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)
 
-        show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data))]
+        show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data))
 
-    ;; When the text is "dirty?" we get recalculate the positions
+        update-position-data
-    (mf/use-layout-effect
-     (mf/deps id dirty?)
         (fn []
-       (let [node (mf/ref-val shape-ref)]
+          (when (some? @local-position-data)
-         (when (and dirty? (some? node))
-           (let [position-data (utp/calc-position-data node)]
-             (when (d/not-empty? position-data)
             (reset! local-position-data nil)
             (st/emit! (dch/update-shapes
                        [id]
                        (fn [shape]
                          (-> shape
-                                (dissoc :dirty?)
+                             (assoc :position-data @local-position-data)))
-                                (assoc :position-data position-data)))
+                       {:save-undo? false}))))]
-                          {:save-undo? false}))))))))
+
+    (mf/use-layout-effect
+     (mf/deps @local-position-data)
+     (fn []
+       ;; Timer to update the shape. We do this so a lot of changes won't produce
+       ;; a lot of updates (kind of a debounce)
+       (let [sid (timers/schedule 250 update-position-data)]
+         (fn []
+           (rx/dispose! sid)))))
 
     [:> shape-container {:shape shape}
      ;; We keep hidden the shape when we're editing so it keeps track of the size

frontend/src/app/util/text_svg_position.cljs

@@ -54,7 +54,7 @@
 (defn calc-text-node-positions
   [base-node viewport zoom]
 
-  (when (some? viewport)
+  (when (and (some? base-node)(some? viewport))
     (let [translate-point
           (fn [pt]
             (let [vbox     (.. ^js viewport -viewBox -baseVal)
@@ -89,15 +89,15 @@
               (let [rtl? (= "rtl" (.-dir (.-parentElement parent-node)))]
                 (->> (.-childNodes parent-node)
                      (mapcat #(parse-text-nodes parent-node rtl? %))))))
-           (map #(update % :position translate-rect))))))
+           (mapv #(update % :position translate-rect))))))
-
-
 
 (defn calc-position-data
   [base-node]
   (let [viewport      (dom/get-element "render")
-        zoom          (get-in @st/state [:workspace-local :zoom])
+        zoom          (or (get-in @st/state [:workspace-local :zoom]) 1)]
-        text-data     (calc-text-node-positions base-node viewport zoom)]
+    (when (and (some? base-node) (some? viewport))
+      (let [text-data     (calc-text-node-positions base-node viewport zoom)]
+        (when (d/not-empty? text-data)
           (->> text-data
                (mapv (fn [{:keys [node position text]}]
                        (let [{:keys [x y width height]} position
@@ -122,4 +122,4 @@
                            :fill-color          (or (get "--fill-color") "#000000")
                            :fill-color-gradient (transit/decode-str (get "--fill-color-gradient"))
                            :fill-opacity        (d/parse-double (or (get "--fill-opacity") "1"))
-                     :text                text})))))))
+                           :text                text}))))))))))