Merge pull request #1904 from penpot/alotor-fix-text-problems

Fix text issues
2025-04-13 15:31:26 -05:00 · 2022-05-17 06:41:39 +02:00 · 2022-05-17 06:41:39 +02:00 · 2b5282025c
commit 2b5282025c
parent 92d7521ec7 a2de5f8fb4
9 changed files with 58 additions and 21 deletions
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@ -392,4 +392,4 @@
  (l/derived :workspace-text-modifier st/state))

 (defn workspace-text-modifier-by-id [id]
-  (l/derived #(get % id) workspace-text-modifier))
+  (l/derived #(get % id) workspace-text-modifier =))
--- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
@ -152,7 +152,10 @@
           (let [old-state (mf/ref-val prev-value)]
             (if (and (some? state) (some? old-state))
               (let [block-changes (ted/get-content-changes old-state state)
-                     prev-data (ted/get-editor-current-inline-styles old-state)
+
+                     prev-data (-> (ted/get-editor-current-inline-styles old-state)
+                                   (dissoc :text-align :text-direction))
+
                     block-to-setup (get-blocks-to-setup block-changes)
                     block-to-add-styles (get-blocks-to-add-styles block-changes)]
                 (-> state
--- a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts.cljs
@ -87,7 +87,8 @@
    (st/emit! (dwt/update-text-modifier id props))))

 (mf/defc text-container
-  {::mf/wrap-props false}
+  {::mf/wrap-props false
+   ::mf/wrap [mf/memo]}
  [props]
  (let [shape       (obj/get props "shape")
        on-update   (obj/get props "on-update")
@ -98,6 +99,7 @@
         (fn [node]
           (when (some? node)
             (on-update shape node))))]
+
    [:& fo/text-shape {:key (str "shape-" (:id shape))
                       :ref handle-update
                       :shape shape
@ -108,6 +110,8 @@
   ::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
@ -115,8 +119,10 @@
        (fn [id]
          (let [old-shape (get prev-text-shapes id)
                new-shape (get text-shapes id)]
-            (and (not (identical? old-shape new-shape))
-                 (not= old-shape new-shape))))
+            (or (and (not (identical? old-shape new-shape))
+                     (not= old-shape new-shape))
+                (not= (get modifiers id)
+                      (get prev-modifiers id)))))

        changed-texts
        (mf/use-memo
@ -125,12 +131,15 @@
               (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 handle-update-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
@ -144,10 +153,29 @@
        (-> (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
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@ -34,7 +34,7 @@

 (mf/defc stroke-menu
  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps"]))]}
-  [{:keys [ids type values show-caps] :as props}]
+  [{:keys [ids type values show-caps disable-stroke-style] :as props}]
  (let [label (case type
                :multiple (tr "workspace.options.selection-stroke")
                :group (tr "workspace.options.group-stroke")
@ -191,4 +191,5 @@
                           :on-reorder (handle-reorder index)
                           :disable-drag disable-drag
                           :select-all select-all
-                           :on-blur on-blur}])])]]))
+                           :on-blur on-blur
+                           :disable-stroke-style disable-stroke-style}])])]]))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@ -47,7 +47,7 @@
        (second))))

 (mf/defc stroke-row
-  [{:keys [index stroke title show-caps on-color-change on-reorder on-color-detach on-remove on-stroke-width-change on-stroke-style-change on-stroke-alignment-change open-caps-select close-caps-select on-stroke-cap-start-change on-stroke-cap-end-change on-stroke-cap-switch disable-drag select-all on-blur]}]
+  [{:keys [index stroke title show-caps on-color-change on-reorder on-color-detach on-remove on-stroke-width-change on-stroke-style-change on-stroke-alignment-change open-caps-select close-caps-select on-stroke-cap-start-change on-stroke-cap-end-change on-stroke-cap-switch disable-drag select-all on-blur disable-stroke-style]}]
  (let [start-caps-state (mf/use-state {:open? false
                                        :top 0
                                        :left 0})
@ -110,14 +110,15 @@
       [:option {:value ":inner"} (tr "workspace.options.stroke.inner")]
       [:option {:value ":outer"} (tr "workspace.options.stroke.outer")]]

-      [:select#style.input-select {:value (enum->string (:stroke-style stroke))
-                                   :on-change (on-stroke-style-change index)}
-       (when (= (:stroke-style stroke) :multiple)
-         [:option {:value ""} "--"])
-       [:option {:value ":solid"} (tr "workspace.options.stroke.solid")]
-       [:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")]
-       [:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")]
-       [:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]]]
+      (when-not disable-stroke-style
+        [:select#style.input-select {:value (enum->string (:stroke-style stroke))
+                                     :on-change (on-stroke-style-change index)}
+         (when (= (:stroke-style stroke) :multiple)
+           [:option {:value ""} "--"])
+         [:option {:value ":solid"} (tr "workspace.options.stroke.solid")]
+         [:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")]
+         [:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")]
+         [:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]])]

     ;; Stroke Caps
     (when show-caps
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
@ -240,6 +240,8 @@
        type :multiple
        all-types (into #{} (map :type shapes))

+        has-text? (contains? all-types :text)
+
        [measure-ids    measure-values]    (get-attrs shapes objects :measure)

        [layer-ids      layer-values
@ -279,7 +281,8 @@
       [:& fill-menu {:type type :ids fill-ids :values fill-values}])

     (when-not (empty? stroke-ids)
-       [:& stroke-menu {:type type :ids stroke-ids :show-caps show-caps :values stroke-values}])
+       [:& stroke-menu {:type type :ids stroke-ids :show-caps show-caps :values stroke-values
+                        :disable-stroke-style has-text?}])

     (when-not (empty? shadow-ids)
       [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}])
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
@ -80,7 +80,8 @@

     [:& stroke-menu {:ids ids
                      :type type
-                      :values stroke-values}]
+                      :values stroke-values
+                      :disable-stroke-style true}]

     [:& shadow-menu
      {:ids ids
--- a/frontend/src/app/worker/thumbnails.cljs
+++ b/frontend/src/app/worker/thumbnails.cljs
@ -116,7 +116,7 @@
                 (rx/map render-thumbnail)
                 (rx/mapcat persist-thumbnail)))]

-    (if (debug? :disable-thumbnail-cachee)
+    (if (debug? :disable-thumbnail-cache)
      (->> (request-data-for-thumbnail file-id revn)
           (rx/map render-thumbnail))
      (->> (request-thumbnail file-id revn)
--- a/frontend/src/debug.cljs
+++ b/frontend/src/debug.cljs
@ -63,7 +63,7 @@
    :text-outline

    ;; Disable thumbnail cache
-    :disable-thumbnail-cachee
+    :disable-thumbnail-cache
    })

 ;; These events are excluded when we activate the :events flag