🐛 Fix auto width/height texts on variant swithching

common/src/app/common/logic/libraries.cljc

@@ -2017,7 +2017,9 @@
   (let [;; We need to sync only the position relative to the origin of the component.
         ;; (see update-attrs for a full explanation)
         previous-shape (reposition-shape previous-shape prev-root current-root)
-        touched        (get previous-shape :touched #{})]
+        touched        (get previous-shape :touched #{})
+        text-auto?     (and (cfh/text-shape? current-shape)
+                            (contains? #{:auto-height :auto-width} (:grow-type current-shape)))]
 
     (loop [attrs       updatable-attrs
            roperations [{:type :set-touched :touched (:touched previous-shape)}]
@@ -2026,6 +2028,10 @@
         (let [attr-group (get ctk/sync-attrs attr)
               skip-operations?
               (or
+               ;; For auto text, avoid copying geometry-driven attrs on switch.
+               (and text-auto?
+                    (contains? #{:points :selrect :width :height :position-data} attr))
+
                ;; If the attribute is not valid for the destiny, don't copy it
                (not (cts/is-allowed-switch-keep-attr? attr (:type current-shape)))
 

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

@@ -46,7 +46,9 @@
    [app.main.data.workspace.thumbnails :as dwt]
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.data.workspace.zoom :as dwz]
+   [app.main.features :as features]
    [app.main.features.pointer-map :as fpmap]
    [app.main.refs :as refs]
    [app.main.repo :as rp]
@@ -1012,6 +1014,13 @@
 
             updated-objects  (pcb/get-objects changes)
             new-children-ids (cfh/get-children-ids-with-self updated-objects (:id new-shape))
+            new-text-ids     (->> new-children-ids
+                                  (keep (fn [id]
+                                          (when-let [child (get updated-objects id)]
+                                            (when (and (cfh/text-shape? child)
+                                                       (not= :fixed (:grow-type child)))
+                                              id))))
+                                  (vec))
 
             [changes parents-of-swapped]
             (if keep-touched?
@@ -1021,6 +1030,9 @@
         (rx/of
          (dwu/start-undo-transaction undo-id)
          (dch/commit-changes changes)
+         (when (and (features/active-feature? state "render-wasm/v1")
+                    (seq new-text-ids))
+           (dwwt/resize-wasm-text-all new-text-ids))
          (ptk/data-event :layout/update {:ids update-layout-ids :undo-group undo-group})
          (dwu/commit-undo-transaction undo-id)
          (dws/select-shape (:id new-shape) false))))))

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

@@ -11,7 +11,6 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
-   [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
@@ -29,10 +28,10 @@
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.transforms :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.router :as rt]
-   [app.render-wasm.api :as wasm.api]
    [app.util.text-editor :as ted]
    [app.util.text.content.styles :as styles]
    [app.util.timers :as ts]
@@ -52,50 +51,6 @@
 (declare v2-update-text-shape-content)
 (declare v2-update-text-editor-styles)
 
-(defn resize-wasm-text-modifiers
-  ([shape]
-   (resize-wasm-text-modifiers shape (:content shape)))
-
-  ([{:keys [id points selrect grow-type] :as shape} content]
-   (wasm.api/use-shape id)
-   (wasm.api/set-shape-text-content id content)
-   (wasm.api/set-shape-text-images id content)
-
-   (let [dimension (wasm.api/get-text-dimensions)
-         width-scale (if (#{:fixed :auto-height} grow-type)
-                       1.0
-                       (/ (:width dimension) (:width selrect)))
-         height-scale (if (= :fixed grow-type)
-                        1.0
-                        (/ (:height dimension) (:height selrect)))
-         resize-v  (gpt/point width-scale height-scale)
-         origin    (first points)]
-
-     {id
-      {:modifiers
-       (ctm/resize-modifiers
-        resize-v
-        origin
-        (:transform shape (gmt/matrix))
-        (:transform-inverse shape (gmt/matrix)))}})))
-
-(defn resize-wasm-text
-  [id]
-  (ptk/reify ::resize-wasm-text
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [objects (dsh/lookup-page-objects state)
-            shape   (get objects id)]
-        (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))))))
-
-(defn resize-wasm-text-all
-  [ids]
-  (ptk/reify ::resize-wasm-text-all
-    ptk/WatchEvent
-    (watch [_ _ _]
-      (->> (rx/from ids)
-           (rx/map resize-wasm-text)))))
-
 ;; -- Content helpers
 
 (defn- v2-content-has-text?
@@ -178,7 +133,7 @@
                      {:undo-group (when new-shape? id)})
 
                     (dwm/apply-wasm-modifiers
-                     (resize-wasm-text-modifiers shape content)
+                     (dwwt/resize-wasm-text-modifiers shape content)
                      {:undo-group (when new-shape? id)})))))
 
               (let [content (d/merge (ted/export-content content)
@@ -823,7 +778,7 @@
            (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 (resize-wasm-text id))
+             (cond->> (rx/of (dwwt/resize-wasm-text id))
                (contains? attrs :font-id)
                (rx/delay 200)))))))
 
@@ -973,11 +928,11 @@
 
             (if (and (not= :fixed (:grow-type shape)) finalize?)
               (dwm/apply-wasm-modifiers
-               (resize-wasm-text-modifiers shape content)
+               (dwwt/resize-wasm-text-modifiers shape content)
                {:undo-group (when new-shape? id)})
 
               (dwm/set-wasm-modifiers
-               (resize-wasm-text-modifiers shape content)
+               (dwwt/resize-wasm-text-modifiers shape content)
                {:undo-group (when new-shape? id)})))
 
            (when finalize?

frontend/src/app/main/data/workspace/tokens/application.cljs

@@ -27,9 +27,9 @@
    [app.main.data.workspace.colors :as wdc]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.shapes :as dwsh]
-   [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.transforms :as dwtr]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.store :as st]
@@ -315,7 +315,7 @@
           (and affects-layout?
                (features/active-feature? state "render-wasm/v1"))
           (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
 
 (defn update-line-height
   ([value shape-ids attributes] (update-line-height value shape-ids attributes nil))
@@ -374,7 +374,7 @@
                                             :page-id page-id}))
           (features/active-feature? state "render-wasm/v1")
           (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
 
 (defn- create-font-family-text-attrs
   [value]
@@ -451,7 +451,7 @@
                                             :page-id page-id}))
           (features/active-feature? state "render-wasm/v1")
           (rx/merge
-           (rx/of (dwt/resize-wasm-text-all shape-ids))))))))
+           (rx/of (dwwt/resize-wasm-text-all shape-ids))))))))
 
 (defn update-font-weight
   ([value shape-ids attributes] (update-font-weight value shape-ids attributes nil))

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

@@ -0,0 +1,72 @@
+;; 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) KALEIDOS INC
+
+(ns app.main.data.workspace.wasm-text
+  "Helpers/events to resize wasm text shapes without depending on workspace.texts.
+
+  This exists to avoid circular deps:
+  workspace.texts -> workspace.libraries -> workspace.texts"
+  (:require
+   [app.common.files.helpers :as cfh]
+   [app.common.geom.matrix :as gmt]
+   [app.common.geom.point :as gpt]
+   [app.common.types.modifiers :as ctm]
+   [app.main.data.helpers :as dsh]
+   [app.main.data.workspace.modifiers :as dwm]
+   [app.render-wasm.api :as wasm.api]
+   [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]))
+
+(defn resize-wasm-text-modifiers
+  ([shape]
+   (resize-wasm-text-modifiers shape (:content shape)))
+
+  ([{:keys [id points selrect grow-type] :as shape} content]
+   (wasm.api/use-shape id)
+   (wasm.api/set-shape-text-content id content)
+   (wasm.api/set-shape-text-images id content)
+
+   (let [dimension (wasm.api/get-text-dimensions)
+         width-scale (if (#{:fixed :auto-height} grow-type)
+                       1.0
+                       (/ (:width dimension) (:width selrect)))
+         height-scale (if (= :fixed grow-type)
+                        1.0
+                        (/ (:height dimension) (:height selrect)))
+         resize-v  (gpt/point width-scale height-scale)
+         origin    (first points)]
+
+     {id
+      {:modifiers
+       (ctm/resize-modifiers
+        resize-v
+        origin
+        (:transform shape (gmt/matrix))
+        (:transform-inverse shape (gmt/matrix)))}})))
+
+(defn resize-wasm-text
+  "Resize a single text shape (auto-width/auto-height) by id.
+  No-op if the id is not a text shape or is :fixed."
+  [id]
+  (ptk/reify ::resize-wasm-text
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects (dsh/lookup-page-objects state)
+            shape   (get objects id)]
+        (if (and (some? shape)
+                 (cfh/text-shape? shape)
+                 (not= :fixed (:grow-type shape)))
+          (rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))
+          (rx/empty))))))
+
+(defn resize-wasm-text-all
+  "Resize all text shapes (auto-width/auto-height) from a collection of ids."
+  [ids]
+  (ptk/reify ::resize-wasm-text-all
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (->> (rx/from ids)
+           (rx/map resize-wasm-text)))))

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs

@@ -15,6 +15,7 @@
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.data.workspace.wasm-text :as dwwt]
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -138,7 +139,7 @@
               (dwsh/update-shapes ids #(assoc % :grow-type grow-type)))
 
              (when (features/active-feature? @st/state "render-wasm/v1")
-               (st/emit! (dwt/resize-wasm-text-all ids)))
+               (st/emit! (dwwt/resize-wasm-text-all ids)))
              ;; We asynchronously commit so every sychronous event is resolved first and inside the transaction
              (ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
            (when (some? on-blur) (on-blur))))]

render-wasm/src/render/strokes.rs

@@ -27,8 +27,8 @@ fn draw_stroke_on_rect(
     // - The same rect if it's a center stroke
     // - A bigger rect if it's an outer stroke
     // - A smaller rect if it's an outer stroke
-    let stroke_rect = stroke.outer_rect(rect);
-    let mut paint = stroke.to_paint(selrect, svg_attrs, scale, antialias);
+    let stroke_rect = stroke.aligned_rect(rect, scale);
+    let mut paint = stroke.to_paint(selrect, svg_attrs, antialias);
 
     // Apply both blur and shadow filters if present, composing them if necessary.
     let filter = compose_filters(blur, shadow);
@@ -63,8 +63,8 @@ fn draw_stroke_on_circle(
     // - The same oval if it's a center stroke
     // - A bigger oval if it's an outer stroke
     // - A smaller oval if it's an outer stroke
-    let stroke_rect = stroke.outer_rect(rect);
-    let mut paint = stroke.to_paint(selrect, svg_attrs, scale, antialias);
+    let stroke_rect = stroke.aligned_rect(rect, scale);
+    let mut paint = stroke.to_paint(selrect, svg_attrs, antialias);
 
     // Apply both blur and shadow filters if present, composing them if necessary.
     let filter = compose_filters(blur, shadow);
@@ -131,7 +131,6 @@ pub fn draw_stroke_on_path(
     selrect: &Rect,
     path_transform: Option<&Matrix>,
     svg_attrs: Option<&SvgAttrs>,
-    scale: f32,
     shadow: Option<&ImageFilter>,
     blur: Option<&ImageFilter>,
     antialias: bool,
@@ -142,7 +141,7 @@ pub fn draw_stroke_on_path(
     let is_open = path.is_open();
 
     let mut paint: skia_safe::Handle<_> =
-        stroke.to_stroked_paint(is_open, selrect, svg_attrs, scale, antialias);
+        stroke.to_stroked_paint(is_open, selrect, svg_attrs, antialias);
 
     let filter = compose_filters(blur, shadow);
     paint.set_image_filter(filter);
@@ -166,7 +165,6 @@ pub fn draw_stroke_on_path(
         canvas,
         is_open,
         svg_attrs,
-        scale,
         blur,
         antialias,
     );
@@ -218,7 +216,6 @@ fn handle_stroke_caps(
     canvas: &skia::Canvas,
     is_open: bool,
     svg_attrs: Option<&SvgAttrs>,
-    scale: f32,
     blur: Option<&ImageFilter>,
     antialias: bool,
 ) {
@@ -233,8 +230,7 @@ fn handle_stroke_caps(
         let first_point = points.first().unwrap();
         let last_point = points.last().unwrap();
 
-        let mut paint_stroke =
-            stroke.to_stroked_paint(is_open, selrect, svg_attrs, scale, antialias);
+        let mut paint_stroke = stroke.to_stroked_paint(is_open, selrect, svg_attrs, antialias);
 
         if let Some(filter) = blur {
             paint_stroke.set_image_filter(filter.clone());
@@ -405,7 +401,7 @@ fn draw_image_stroke_in_container(
 
     // Draw the stroke based on the shape type, we are using this stroke as
     // a "selector" of the area of the image we want to show.
-    let outer_rect = stroke.outer_rect(container);
+    let outer_rect = stroke.aligned_rect(container, scale);
 
     match &shape.shape_type {
         shape_type @ (Type::Rect(_) | Type::Frame(_)) => {
@@ -450,8 +446,7 @@ fn draw_image_stroke_in_container(
                     }
                 }
                 let is_open = p.is_open();
-                let mut paint =
-                    stroke.to_stroked_paint(is_open, &outer_rect, svg_attrs, scale, antialias);
+                let mut paint = stroke.to_stroked_paint(is_open, &outer_rect, svg_attrs, antialias);
                 canvas.draw_path(&path, &paint);
                 if stroke.render_kind(is_open) == StrokeKind::Outer {
                     // Small extra inner stroke to overlap with the fill
@@ -466,7 +461,6 @@ fn draw_image_stroke_in_container(
                     canvas,
                     is_open,
                     svg_attrs,
-                    scale,
                     shape.image_filter(1.).as_ref(),
                     antialias,
                 );
@@ -662,7 +656,6 @@ fn render_internal(
                         &selrect,
                         path_transform.as_ref(),
                         svg_attrs,
-                        scale,
                         shadow,
                         shape.image_filter(1.).as_ref(),
                         antialias,
@@ -685,14 +678,13 @@ pub fn render_text_paths(
     shadow: Option<&ImageFilter>,
     antialias: bool,
 ) {
-    let scale = render_state.get_scale();
     let canvas = render_state
         .surfaces
         .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Strokes));
     let selrect = &shape.selrect;
     let svg_attrs = shape.svg_attrs.as_ref();
     let mut paint: skia_safe::Handle<_> =
-        stroke.to_text_stroked_paint(false, selrect, svg_attrs, scale, antialias);
+        stroke.to_text_stroked_paint(false, selrect, svg_attrs, antialias);
 
     if let Some(filter) = shadow {
         paint.set_image_filter(filter.clone());

render-wasm/src/shapes/strokes.rs

@@ -1,3 +1,4 @@
+use crate::math::is_close_to;
 use crate::shapes::fills::{Fill, SolidColor};
 use skia_safe::{self as skia, Rect};
 
@@ -144,6 +145,15 @@ impl Stroke {
         }
     }
 
+    pub fn aligned_rect(&self, rect: &Rect, scale: f32) -> Rect {
+        let stroke_rect = self.outer_rect(rect);
+        if self.kind != StrokeKind::Center {
+            return stroke_rect;
+        }
+
+        align_rect_to_half_pixel(&stroke_rect, self.width, scale)
+    }
+
     pub fn outer_corners(&self, corners: &Corners) -> Corners {
         let offset = match self.kind {
             StrokeKind::Center => 0.0,
@@ -162,7 +172,6 @@ impl Stroke {
         &self,
         rect: &Rect,
         svg_attrs: Option<&SvgAttrs>,
-        scale: f32,
         antialias: bool,
     ) -> skia::Paint {
         let mut paint = self.fill.to_paint(rect, antialias);
@@ -171,7 +180,7 @@ impl Stroke {
         let width = match self.kind {
             StrokeKind::Inner => self.width,
             StrokeKind::Center => self.width,
-            StrokeKind::Outer => self.width + (1. / scale),
+            StrokeKind::Outer => self.width,
         };
 
         paint.set_stroke_width(width);
@@ -230,10 +239,9 @@ impl Stroke {
         is_open: bool,
         rect: &Rect,
         svg_attrs: Option<&SvgAttrs>,
-        scale: f32,
         antialias: bool,
     ) -> skia::Paint {
-        let mut paint = self.to_paint(rect, svg_attrs, scale, antialias);
+        let mut paint = self.to_paint(rect, svg_attrs, antialias);
         match self.render_kind(is_open) {
             StrokeKind::Inner => {
                 paint.set_stroke_width(2. * paint.stroke_width());
@@ -254,10 +262,9 @@ impl Stroke {
         is_open: bool,
         rect: &Rect,
         svg_attrs: Option<&SvgAttrs>,
-        scale: f32,
         antialias: bool,
     ) -> skia::Paint {
-        let mut paint = self.to_paint(rect, svg_attrs, scale, antialias);
+        let mut paint = self.to_paint(rect, svg_attrs, antialias);
         match self.render_kind(is_open) {
             StrokeKind::Inner => {
                 paint.set_stroke_width(2. * paint.stroke_width());
@@ -284,6 +291,38 @@ impl Stroke {
     }
 }
 
+fn align_rect_to_half_pixel(rect: &Rect, stroke_width: f32, scale: f32) -> Rect {
+    if scale <= 0.0 {
+        return *rect;
+    }
+
+    let stroke_pixels = stroke_width * scale;
+    let stroke_pixels_rounded = stroke_pixels.round();
+    if !is_close_to(stroke_pixels, stroke_pixels_rounded) {
+        return *rect;
+    }
+
+    if (stroke_pixels_rounded as i32) % 2 == 0 {
+        return *rect;
+    }
+
+    let left_px = rect.left * scale;
+    let top_px = rect.top * scale;
+    let target_frac = 0.5;
+    let dx_px = target_frac - (left_px - left_px.floor());
+    let dy_px = target_frac - (top_px - top_px.floor());
+
+    if is_close_to(dx_px, 0.0) && is_close_to(dy_px, 0.0) {
+        return *rect;
+    }
+
+    Rect::from_xywh(
+        rect.left + (dx_px / scale),
+        rect.top + (dy_px / scale),
+        rect.width(),
+        rect.height(),
+    )
+}
 fn cap_margin_for_cap(cap: Option<StrokeCap>, width: f32) -> f32 {
     match cap {
         Some(StrokeCap::LineArrow)