🐛 Fix Update main component thumbnail

common/src/app/common/thumbnails.cljc

@@ -1,7 +1,18 @@
 (ns app.common.thumbnails
-  (:require [cuerdas.core :as str]))
+  (:require
+   [app.common.uuid :as uuid]
+   [cuerdas.core :as str]))
 
 (defn fmt-object-id
   "Returns ids formatted as a string (object-id)"
   [file-id page-id frame-id tag]
   (str/ffmt "%/%/%/%" file-id page-id frame-id tag))
+
+(defn file-id?
+  "Returns ids formatted as a string (file-id)"
+  [object-id file-id]
+  (str/starts-with? object-id (str/concat file-id "/")))
+
+(defn get-file-id
+  [object-id]
+  (uuid/uuid (str/slice object-id 0 (str/index-of object-id "/"))))

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

@@ -754,6 +754,18 @@
                 (dch/commit-changes (assoc nonlocal-changes
                                            :file-id file-id)))))))))))
 
+(defn- update-component-thumbnail-sync
+  [state component-id file-id tag]
+  (let [current-file-id (:current-file-id state)
+        current-file?   (= current-file-id file-id)
+        data            (if current-file?
+                          (get state :workspace-data)
+                          (get-in state [:workspace-libraries file-id :data]))
+        component       (ctkl/get-component data component-id)
+        page-id         (:main-instance-page component)
+        root-id         (:main-instance-id component)]
+    (dwt/request-thumbnail file-id page-id root-id tag)))
+
 (defn update-component-sync
   ([shape-id file-id] (update-component-sync shape-id file-id nil))
   ([shape-id file-id undo-group]
@@ -761,14 +773,18 @@
      ptk/WatchEvent
      (watch [_ state _]
        (let [current-file-id (:current-file-id state)
+             current-file?   (= current-file-id file-id)
              page            (wsh/lookup-page state)
              shape           (ctn/get-shape page shape-id)
+             component-id    (:component-id shape)
              undo-id         (js/Symbol)]
          (rx/of
           (dwu/start-undo-transaction undo-id)
           (update-component shape-id undo-group)
           (sync-file current-file-id file-id :components (:component-id shape) undo-group)
-          (when (not= current-file-id file-id)
+          (update-component-thumbnail-sync state component-id file-id "frame")
+          (update-component-thumbnail-sync state component-id file-id "component")
+          (when (not current-file?)
             (sync-file file-id file-id :components (:component-id shape) undo-group))
           (dwu/commit-undo-transaction undo-id)))))))
 
@@ -795,7 +811,8 @@
   (ptk/reify ::update-component-thumbnail
     ptk/WatchEvent
     (watch [_ state _]
-      (let [data            (get state :workspace-data)
+      (rx/of (update-component-thumbnail-sync state component-id file-id "component"))
+      #_(let [data            (get state :workspace-data)
             component       (ctkl/get-component data component-id)
             page-id         (:main-instance-page component)
             root-id         (:main-instance-id component)]

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

@@ -34,6 +34,17 @@
   ([state page-id]
    (dm/get-in state [:viewer :pages page-id :objects])))
 
+(defn lookup-library-objects
+  [state file-id page-id]
+  (dm/get-in state [:workspace-libraries file-id :data :pages-index page-id :objects]))
+
+(defn lookup-objects
+  [state file-id page-id]
+  (let [current-file? (= file-id (:current-file-id state))]
+    (if ^boolean current-file?
+      (lookup-page-objects state page-id)
+      (lookup-library-objects state file-id page-id))))
+
 (defn lookup-page-options
   ([state]
    (lookup-page-options state (:current-page-id state)))

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

@@ -78,7 +78,7 @@
 
   (let [object-id (or object-id (thc/fmt-object-id file-id page-id frame-id tag))
         tp        (tp/tpoint-ms)
-        objects   (wsh/lookup-page-objects state page-id)
+        objects   (wsh/lookup-objects state file-id page-id)
         shape     (get objects frame-id)]
 
     (->> (render/render-frame objects shape object-id)
@@ -116,11 +116,16 @@
     (ptk/reify ::assoc-thumbnail
       ptk/UpdateEvent
       (update [_ state]
-        (let [prev-uri (dm/get-in state [:workspace-thumbnails object-id])]
+        (let [prev-uri (dm/get-in state [:workspace-thumbnails object-id])
+              current-file-id  (:current-file-id state)]
           (some->> prev-uri (vreset! prev-uri*))
           (l/trc :hint "assoc thumbnail" :object-id object-id :uri uri)
 
-          (update state :workspace-thumbnails assoc object-id uri)))
+          #_(update state :workspace-thumbnails assoc object-id uri)
+          (if (thc/file-id? object-id current-file-id)
+            (update state :workspace-thumbnails assoc object-id uri)
+            (let [file-id (thc/get-file-id object-id)]
+              (update-in state [:workspace-libraries file-id :thumbnails] assoc object-id uri)))))
 
       ptk/EffectEvent
       (effect [_ _ _]

frontend/src/app/main/render.cljs

@@ -417,11 +417,14 @@
              :xmlns "http://www.w3.org/2000/svg"
              :xmlnsXlink "http://www.w3.org/1999/xlink"
              :fill "none"}
-       [:foreignObject {:x 0 :y 0 :width width :height height }
+       [:image {:x 0
-        [:img {:src thumbnail-uri
+                :y 0
+                :width width
+                :height height
+                :href thumbnail-uri
                 :on-error on-error
                 :loading "lazy"
-               :decoding "async"}]]
+                :decoding "async"}]
        (when show-grids?
          [:& empty-grids {:root-shape-id root-shape-id :objects objects}])])))
 
@@ -623,8 +626,8 @@
 
            viewbox        (str/ffmt "% % % %" x y width height)
 
-           [fixed-width
+           [fixed-width fixed-height] (th/get-relative-size width height)
-            fixed-height] (th/get-relative-size width height)
+           [component-width component-height] (th/get-proportional-size width height 140 140)
 
            data           (with-redefs [cfg/public-uri cfg/rasterizer-uri]
                             (rds/renderToStaticMarkup
@@ -636,7 +639,8 @@
                                               :x x
                                               :y y
                                               :width width
-                                              :height height})))]
+                                              :height height})))
+           component?    (str/ends-with? object-id "/component")]
 
        (->> (fonts/render-font-styles-cached fonts)
             (rx/catch (fn [cause]
@@ -646,9 +650,8 @@
             (rx/map (fn [styles]
                       {:id object-id
                        :data data
-                       :viewbox viewbox
+                       :width (if component? component-width fixed-width)
-                       :width fixed-width
+                       :height (if component? component-height fixed-height)
-                       :height fixed-height
                        :styles styles}))))
 
      (do

frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs

@@ -273,11 +273,14 @@
   [file-id component]
   (let [page-id   (:main-instance-page component)
         root-id   (:main-instance-id component)
-        object-id (thc/fmt-object-id file-id page-id root-id "component")]
+        object-id (thc/fmt-object-id file-id page-id root-id "component")
-    (if (= file-id (:id @refs/workspace-file))
+        current-file? (= file-id (:id @refs/workspace-file))]
+
+    (if current-file?
       (mf/deref (refs/workspace-thumbnail-by-id object-id))
-      (let [thumbnails (dm/get-in @refs/workspace-libraries [file-id :thumbnails (dm/str object-id)])]
+      (let [libraries  @refs/workspace-libraries
-        thumbnails))))
+            thumbnail (dm/get-in libraries [file-id :thumbnails object-id])]
+        thumbnail))))
 
 (mf/defc component-item-thumbnail
   "Component that renders the thumbnail image or the original SVG."