🐛 Fix thumbnails. Add safety text position

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

@@ -84,7 +84,7 @@
             disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
 
             [on-load-frame-dom render-frame? thumbnail-renderer]
-            (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail?)
+            (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render)
 
             on-frame-load
             (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
@@ -129,5 +129,5 @@
           [:g.frame-thumbnail-wrapper
            {:id (dm/str "thumbnail-container-" (:id shape))
             ;; Hide the thumbnail when not displaying
-            :opacity (when (and @rendered? (not thumbnail?)) 0)}
+            :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
            thumbnail-renderer]]]))))

frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs

@@ -53,7 +53,7 @@
 
 (defn use-render-thumbnail
   "Hook that will create the thumbnail thata"
-  [page-id {:keys [id x y width height] :as shape} node-ref rendered? disable?]
+  [page-id {:keys [id x y width height] :as shape} node-ref rendered? disable? force-render]
 
   (let [frame-canvas-ref (mf/use-ref nil)
         frame-image-ref (mf/use-ref nil)
@@ -85,12 +85,13 @@
                    img-node    (mf/ref-val frame-image-ref)]
                (when (draw-thumbnail-canvas! canvas-node img-node)
                  (reset! image-url nil)
-                 (reset! render-frame? false))
 
-               ;; If we don't have the thumbnail data saved (normaly the first load) we update the data
-               ;; when available
-               (when (not @thumbnail-data-ref)
-                 (st/emit! (dwt/update-thumbnail page-id id) ))))))
+                 ;; If we don't have the thumbnail data saved (normaly the first load) we update the data
+                 ;; when available
+                 (when (not @thumbnail-data-ref)
+                   (st/emit! (dwt/update-thumbnail page-id id) ))
+
+                 (reset! render-frame? false))))))
 
         generate-thumbnail
         (mf/use-callback
@@ -140,6 +141,18 @@
                (.observe observer node #js {:childList true :attributes true :attributeOldValue true :characterData true :subtree true})
                (reset! observer-ref observer)))))]
 
+    (mf/use-effect
+     (mf/deps @render-frame? thumbnail-data)
+     (fn []
+       (if (and (some? thumbnail-data) @render-frame?)
+         (reset! render-frame? false))))
+
+    (mf/use-effect
+     (mf/deps force-render)
+     (fn []
+       (when force-render
+         (rx/push! updates-str :update))))
+
     (mf/use-effect
      (fn []
        (let [subid (->> updates-str
@@ -190,7 +203,9 @@
           :width fixed-width
           :height fixed-height
           ;; DEBUG
-          :style {:filter (when (debug? :thumbnails) "invert(1)")}}]]
+          :style {:filter (when (debug? :thumbnails) "invert(1)")
+                  :width "100%"
+                  :height "100%"}}]]
 
        (when (some? @image-url)
          [:image {:ref frame-image-ref

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

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.rect :as gshr]
    [app.common.math :as mth]
    [app.common.pages.helpers :as cph]
    [app.common.text :as txt]
@@ -61,25 +62,34 @@
       (and (some? shape) (some? editor-content))
       (assoc :content (d/txt-merge content editor-content)))))
 
+(defn overlaps-position-data?
+  [bounding-box position-data]
+  (let [fix-rect #(assoc % :y (- (:y %) (:height %)))]
+    (->> position-data
+         (some #(gshr/overlaps-rects? bounding-box (fix-rect %)))
+         (boolean))))
+
 (defn- update-text-shape
-  [{:keys [grow-type id migrate]} node]
+  [{:keys [grow-type id migrate points]} node]
   ;; Check if we need to update the size because it's auto-width or auto-height
   ;; Update the position-data of every text fragment
   (p/let [position-data (utp/calc-position-data node)]
-    (st/emit! (dwt/update-position-data id position-data))
+    (let [bounding-box (gsh/points->selrect points)]
+      ;; At least one paragraph needs to be inside the bounding box
+      (when (overlaps-position-data? bounding-box position-data)
+        (st/emit! (dwt/update-position-data id position-data)))
 
-    (when (contains? #{:auto-height :auto-width} grow-type)
-      (let [{:keys [width height]}
-            (-> (dom/query node ".paragraph-set")
-                (dom/get-client-size))
-            width (mth/ceil width)
-            height (mth/ceil height)]
-        (when (and (not (mth/almost-zero? width))
-                   (not (mth/almost-zero? height))
-                   (not migrate))
-          (st/emit! (dwt/resize-text id width height))))))
-
-  (st/emit! (dwt/clean-text-modifier id)))
+      (when (contains? #{:auto-height :auto-width} grow-type)
+        (let [{:keys [width height]}
+              (-> (dom/query node ".paragraph-set")
+                  (dom/get-client-size))
+              width (mth/ceil width)
+              height (mth/ceil height)]
+          (when (and (not (mth/almost-zero? width))
+                     (not (mth/almost-zero? height))
+                     (not migrate))
+            (st/emit! (dwt/resize-text id width height))))))
+    (st/emit! (dwt/clean-text-modifier id))))
 
 (defn- update-text-modifier
   [{:keys [grow-type id]} node]