🐛 Fix several problems with layouts and texts

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

@@ -104,7 +104,7 @@
     (watch [_ state _]
       (let [page-id (or page-id (:current-page-id state))
             objects (dsh/lookup-page-objects state page-id)
-            ids (->> ids (filter #(contains? objects %)))]
+            ids (->> ids (remove uuid/zero?) (filter #(contains? objects %)))]
         (if (d/not-empty? ids)
           (let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))]
             (if (features/active-feature? state "render-wasm/v1")

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

@@ -776,11 +776,7 @@
              (rx/of (v2-update-text-editor-styles id attrs)))
 
            (when (features/active-feature? state "render-wasm/v1")
-             ;; This delay is to give time for the font to be correctly rendered
-             ;; in wasm.
-             (cond->> (rx/of (dwwt/resize-wasm-text id))
-               (contains? attrs :font-id)
-               (rx/delay 200)))))))
+             (rx/of (dwwt/resize-wasm-text-debounce id)))))))
 
     ptk/EffectEvent
     (effect [_ state _]

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

@@ -62,6 +62,65 @@
           (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))
           (rx/empty))))))
 
+(defn resize-wasm-text-debounce-commit
+  []
+  (ptk/reify ::resize-wasm-text
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [ids (get state ::resize-wasm-text-debounce-ids)
+            objects (dsh/lookup-page-objects state)
+
+            modifiers
+            (reduce
+             (fn [modifiers id]
+               (let [shape (get objects id)]
+                 (cond-> modifiers
+                   (and (some? shape)
+                        (cfh/text-shape? shape)
+                        (not= :fixed (:grow-type shape)))
+                   (merge (resize-wasm-text-modifiers shape)))))
+             {}
+             ids)]
+        (if (not (empty? modifiers))
+          (rx/of (dwm/apply-wasm-modifiers modifiers))
+          (rx/empty))))))
+
+;; This event will debounce the resize events so, if there are many, they
+;; are processed at the same time and not one-by-one. This will improve
+;; performance because it's better to make only one layout calculation instead
+;; of (potentialy) hundreds.
+(defn resize-wasm-text-debounce
+  [id]
+  (let [cur-event (js/Symbol)]
+    (ptk/reify ::resize-wasm-text-debounce
+      ptk/UpdateEvent
+      (update [_ state]
+        (-> state
+            (update ::resize-wasm-text-debounce-ids (fnil conj []) id)
+            (cond-> (nil? (::resize-wasm-text-debounce-event state))
+              (assoc ::resize-wasm-text-debounce-event cur-event))))
+
+      ptk/WatchEvent
+      (watch [_ state stream]
+        (if (= (::resize-wasm-text-debounce-event state) cur-event)
+          (let [stopper (->> stream (rx/filter (ptk/type? :app.main.data.workspace/finalize)))]
+            (rx/concat
+             (rx/merge
+              (->> stream
+                   (rx/filter (ptk/type? ::resize-wasm-text-debounce))
+                   (rx/debounce 20)
+                   (rx/take 1)
+                   (rx/delay 200)
+                   (rx/map #(resize-wasm-text-debounce-commit))
+                   (rx/take-until stopper))
+
+              (rx/of (resize-wasm-text-debounce id)))
+
+             (rx/of #(dissoc %
+                             ::resize-wasm-text-debounce-ids
+                             ::resize-wasm-text-debounce-event))))
+          (rx/empty))))))
+
 (defn resize-wasm-text-all
   "Resize all text shapes (auto-width/auto-height) from a collection of ids."
   [ids]

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

@@ -75,32 +75,31 @@
   [{:keys [points] :as shape} zoom grid-edition?]
   (let [leftmost  (->> points (reduce left?))
         topmost   (->> points (remove #{leftmost}) (reduce top?))
-        rightmost (->> points (remove #{leftmost topmost}) (reduce right?))
+        rightmost (->> points (remove #{leftmost topmost}) (reduce right?))]
+    (when (and (some? leftmost) (some? topmost) (some? rightmost))
+      (let [left-top (gpt/to-vec leftmost topmost)
+            left-top-angle (gpt/angle left-top)
 
-        left-top (gpt/to-vec leftmost topmost)
-        left-top-angle (gpt/angle left-top)
+            top-right (gpt/to-vec topmost rightmost)
+            top-right-angle (gpt/angle top-right)
 
-        top-right (gpt/to-vec topmost rightmost)
-        top-right-angle (gpt/angle top-right)
+            ;; Choose the position that creates the less angle between left-side and top-side
+            [label-pos angle h-pos v-pos]
+            (if (< (mth/abs left-top-angle) (mth/abs top-right-angle))
+              [leftmost left-top-angle left-top (gpt/perpendicular left-top)]
+              [topmost top-right-angle top-right (gpt/perpendicular top-right)])
 
-        ;; Choose the position that creates the less angle between left-side and top-side
-        [label-pos angle h-pos v-pos]
-        (if (< (mth/abs left-top-angle) (mth/abs top-right-angle))
-          [leftmost left-top-angle left-top (gpt/perpendicular left-top)]
-          [topmost top-right-angle top-right (gpt/perpendicular top-right)])
+            delta-x (if grid-edition? 40 0)
+            delta-y (if grid-edition? 50 10)
 
-        delta-x (if grid-edition? 40 0)
-        delta-y (if grid-edition? 50 10)
-
-        label-pos
-        (-> label-pos
-            (gpt/subtract (gpt/scale (gpt/unit v-pos) (/ delta-y zoom)))
-            (gpt/subtract (gpt/scale (gpt/unit h-pos) (/ delta-x zoom))))]
-
-    (dm/fmt "rotate(% %,%) scale(%, %) translate(%, %)"
-            ;; rotate
-            angle (:x label-pos) (:y label-pos)
-            ;; scale
-            (/ 1 zoom) (/ 1 zoom)
-            ;; translate
-            (* zoom (:x label-pos)) (* zoom (:y label-pos)))))
+            label-pos
+            (-> label-pos
+                (gpt/subtract (gpt/scale (gpt/unit v-pos) (/ delta-y zoom)))
+                (gpt/subtract (gpt/scale (gpt/unit h-pos) (/ delta-x zoom))))]
+        (dm/fmt "rotate(% %,%) scale(%, %) translate(%, %)"
+                ;; rotate
+                angle (:x label-pos) (:y label-pos)
+                ;; scale
+                (/ 1 zoom) (/ 1 zoom)
+                ;; translate
+                (* zoom (:x label-pos)) (* zoom (:y label-pos)))))))

frontend/src/app/plugins/api.cljs

@@ -26,6 +26,7 @@
    [app.main.data.workspace.groups :as dwg]
    [app.main.data.workspace.media :as dwm]
    [app.main.data.workspace.selection :as dws]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.fonts :refer [fetch-font-css]]
    [app.main.router :as rt]
    [app.main.store :as st]
@@ -338,9 +339,14 @@
 
         :else
         (let [page  (dsh/lookup-page @st/state)
-              shape (-> (cts/setup-shape {:type :text :x 0 :y 0 :grow-type :auto-width})
-                        (update :content txt/change-text text)
-                        (assoc :position-data nil))
+              shape (-> (cts/setup-shape {:type :text
+                                          :x 0 :y 0
+                                          :width 1 :height 1
+                                          :grow-type :auto-width})
+                        (update :content txt/change-text text
+                                ;; Text should be given a color by default
+                                {:fills [{:fill-color "#000000" :fill-opacity 1}]})
+                        (dissoc :position-data))
 
               changes
               (-> (cb/empty-changes)
@@ -348,7 +354,9 @@
                   (cb/with-objects (:objects page))
                   (cb/add-object shape))]
 
-          (st/emit! (ch/commit-changes changes))
+          (st/emit!
+           (ch/commit-changes changes)
+           (dwwt/resize-wasm-text-debounce (:id shape)))
           (shape/shape-proxy plugin-id (:id shape)))))
 
     :createShapeFromSvg

frontend/src/app/render_wasm/api.cljs

@@ -190,11 +190,13 @@
 (defn update-text-rect!
   [id]
   (when wasm/context-initialized?
-    (mw/emit!
-     {:cmd :index/update-text-rect
-      :page-id (:current-page-id @st/state)
-      :shape-id id
-      :dimensions (get-text-dimensions id)})))
+    (let [dimensions (get-text-dimensions id)
+          page-id (:current-page-id @st/state)]
+      (mw/emit!
+       {:cmd :index/update-text-rect
+        :page-id page-id
+        :shape-id id
+        :dimensions dimensions}))))
 
 
 (defn- ensure-text-content
@@ -1564,7 +1566,7 @@
                        :text-decoration (get element :text-decoration)
                        :letter-spacing  (get element :letter-spacing)
                        :font-style      (get element :font-style)
-                       :fills           (get element :fills)
+                       :fills           (d/nilv (get element :fills) [{:fill-color "#000000"}])
                        :text            text}))))))]
       (mem/free)