✨ Calculate resize when a text property changes

common/app/common/pages.cljc

@@ -621,7 +621,7 @@
 
               ;; Rotate the group shape change the data and rotate back again
               (-> group
-                  (assoc-in [:modifiers :rotation] (- (:rotation group)))
+                  (assoc-in [:modifiers :rotation] (- (:rotation group 0)))
                   (geom/transform-shape)
                   (merge (select-keys selrect [:x :y :width :height]))
                   (assoc-in [:modifiers :rotation] (:rotation group))

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

@@ -53,7 +53,7 @@
 (mf/defc text-wrapper
   {::mf/wrap-props false}
   [props]
-  (let [{:keys [id x1 y1 content group] :as shape} (unchecked-get props "shape")
+  (let [{:keys [id x1 y1 content group grow-type width height ] :as shape} (unchecked-get props "shape")
 
         selected  (mf/deref refs/selected-shapes)
         edition   (mf/deref refs/selected-edition)
@@ -61,6 +61,8 @@
         selected? (and (contains? selected id)
                        (= (count selected) 1))
 
+        calculate-size (mf/use-state false)
+
         on-mouse-down   #(handle-mouse-down % shape)
         on-context-menu #(common/on-context-menu % shape)
 
@@ -71,13 +73,26 @@
           (when selected?
             (st/emit! (dw/start-edition-mode (:id shape)))))]
 
+    (mf/use-effect
+     (mf/deps grow-type content width height)
+     (fn []
+       (reset! calculate-size true)
+       (timers/schedule 200 (fn [] (reset! calculate-size false)))))
+
     [:g.shape {:on-double-click on-double-click
                :on-mouse-down on-mouse-down
                :on-context-menu on-context-menu}
-     (if edition?
+     [:*
-       [:& text-shape-edit {:shape shape}]
+      (when (and (not edition?) @calculate-size)
-       [:& text/text-shape {:shape shape
+        [:g {:opacity 0}
-                            :selected? selected?}])]))
+         ;; We only render the component for its side-effect
+         [:& text-shape-edit {:shape shape
+                              :read-only? true}]])
+
+      (if edition?
+        [:& text-shape-edit {:shape shape}]
+        [:& text/text-shape {:shape shape
+                             :selected? selected?}])]]))
 
 ;; --- Text Editor Rendering
 
@@ -242,7 +257,7 @@
 
 (mf/defc text-shape-edit
   {::mf/wrap [mf/memo]}
-  [{:keys [shape] :as props}]
+  [{:keys [shape read-only?] :or {read-only? false} :as props}]
   (let [{:keys [id x y width height content grow-type]} shape
 
         state    (mf/use-state #(parse-content content))
@@ -253,7 +268,8 @@
 
         on-close
         (fn []
-          (st/emit! dw/clear-edition-mode))
+          (when (not read-only?)
+            (st/emit! dw/clear-edition-mode)))
 
         on-click
         (fn [event]
@@ -287,28 +303,31 @@
 
         on-mount
         (fn []
-          (let [lkey1 (events/listen js/document EventType.CLICK on-click)
+          (when (not read-only?)
-                lkey2 (events/listen js/document EventType.KEYUP on-key-up)]
+            (let [lkey1 (events/listen js/document EventType.CLICK on-click)
-            (st/emit! (dwt/assign-editor id editor)
+                  lkey2 (events/listen js/document EventType.KEYUP on-key-up)]
-                      dwc/start-undo-transaction)
+              (st/emit! (dwt/assign-editor id editor)
+                        dwc/start-undo-transaction)
 
-            #(do
+              #(do
-               (st/emit! (dwt/assign-editor id nil)
+                 (st/emit! (dwt/assign-editor id nil)
-                         dwc/commit-undo-transaction)
+                           dwc/commit-undo-transaction)
-               (events/unlistenByKey lkey1)
+                 (events/unlistenByKey lkey1)
-               (events/unlistenByKey lkey2))))
+                 (events/unlistenByKey lkey2)))))
 
         on-focus
         (fn [event]
-          (dwt/editor-select-all! editor))
+          (when (not read-only?)
+            (dwt/editor-select-all! editor)))
 
         on-change
         (mf/use-callback
          (fn [val]
-           (let [content (js->clj val :keywordize-keys true)
+           (when (not read-only?)
-                 content (first content)]
+             (let [content (js->clj val :keywordize-keys true)
-             (st/emit! (dw/update-shape id {:content content}))
+                   content (first content)]
-             (reset! state val))))]
+               (st/emit! (dw/update-shape id {:content content}))
+               (reset! state val)))))]
 
     (mf/use-effect on-mount)
 
@@ -335,7 +354,7 @@
                        :value @state
                        :on-change on-change}
       [:> rslate/Editable
-       {:auto-focus "true"
+       {:auto-focus (when (not read-only?) "true")
         :spell-check "false"
         :on-focus on-focus
         :class "rich-text"