🐛 Fix problem with duplicated ids for thumbnails

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

@@ -7,6 +7,7 @@
 (ns app.main.data.workspace.thumbnails
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.data.workspace.changes :as dch]
@@ -27,57 +28,44 @@
 
 (defn update-thumbnail
   "Updates the thumbnail information for the given frame `id`"
-  [id data]
-  (let [lock (uuid/next)]
+  [page-id frame-id data]
+  (let [lock (uuid/next)
+        object-id (dm/str page-id frame-id)]
+
     (ptk/reify ::update-thumbnail
       IDeref
-      (-deref [_] {:id id :data data})
+      (-deref [_] {:object-id object-id :data data})
       
       ptk/UpdateEvent
       (update [_ state]
         (-> state
-            (assoc-in [:workspace-file :thumbnails id] data)
-            (cond-> (nil? (get-in state [::update-thumbnail-lock id]))
-              (assoc-in [::update-thumbnail-lock id] lock))))
+            (assoc-in [:workspace-file :thumbnails object-id] data)
+            (cond-> (nil? (get-in state [::update-thumbnail-lock object-id]))
+              (assoc-in [::update-thumbnail-lock object-id] lock))))
 
       ptk/WatchEvent
       (watch [_ state stream]
-        (when (= lock (get-in state [::update-thumbnail-lock id]))
+        (when (= lock (get-in state [::update-thumbnail-lock object-id]))
           (let [stopper (->> stream (rx/filter (ptk/type? :app.main.data.workspace/finalize)))
                 params {:file-id (:current-file-id state)
-                        :object-id id}]
+                        :object-id object-id}]
             ;; Sends the first event and debounce the rest. Will only make one update once
             ;; the 2 second debounce is finished
             (rx/merge
              (->> stream
                   (rx/filter (ptk/type? ::update-thumbnail))
                   (rx/map deref)
-                  (rx/filter #(= id (:id %)))
+                  (rx/filter #(= object-id (:object-id %)))
                   (rx/debounce 2000)
                   (rx/take 1)
                   (rx/map :data)
                   (rx/flat-map #(rp/mutation! :upsert-file-object-thumbnail (assoc params :data %)))
-                  (rx/map #(fn [state] (d/dissoc-in state [::update-thumbnail-lock id])))
+                  (rx/map #(fn [state] (d/dissoc-in state [::update-thumbnail-lock object-id])))
                   (rx/take-until stopper))
 
-             (->> (rx/of (update-thumbnail id data))
+             (->> (rx/of (update-thumbnail page-id frame-id data))
                   (rx/observe-on :async)))))))))
 
-(defn remove-thumbnail
-  [id]
-  (ptk/reify ::remove-thumbnail
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state (d/dissoc-in [:workspace-file :thumbnails id])))
-
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [params {:file-id (:current-file-id state)
-                    :object-id id
-                    :data nil}]
-        (->> (rp/mutation! :upsert-file-object-thumbnail params)
-             (rx/ignore))))))
-
 (defn- extract-frame-changes
   "Process a changes set in a commit to extract the frames that are changing"
   [[event [old-objects new-objects]]]

frontend/src/app/main/refs.cljs

@@ -399,8 +399,11 @@
   (l/derived #(dm/get-in % [:workspace-file :thumbnails] {}) st/state))
 
 (defn thumbnail-frame-data
-  [frame-id]
-  (l/derived #(get % frame-id) thumbnail-data))
+  [page-id frame-id]
+  (l/derived
+   (fn [thumbnails]
+     (get thumbnails (dm/str page-id frame-id)))
+   thumbnail-data))
 
 (def workspace-text-modifier
   (l/derived :workspace-text-modifier st/state))

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

@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace.thumbnails :as dwt]
    [app.main.refs :as refs]
+   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.shapes.embed :as embed]
    [app.main.ui.shapes.frame :as frame]
@@ -67,8 +68,11 @@
 
             ;; Thumbnail data
             frame-id           (:id shape)
-            thumbnail-data-ref (mf/use-memo (mf/deps frame-id) #(refs/thumbnail-frame-data frame-id))
+            page-id            (mf/use-ctx ctx/current-page-id)
+
+            thumbnail-data-ref (mf/use-memo (mf/deps page-id frame-id) #(refs/thumbnail-frame-data page-id frame-id))
             thumbnail-data     (mf/deref thumbnail-data-ref)
+
             thumbnail?         (and thumbnail? (or (some? (:thumbnail shape)) (some? thumbnail-data)))
 
             ;; References to the current rendered node and the its parentn
@@ -84,7 +88,7 @@
             disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
 
             [on-load-frame-dom thumb-renderer]
-            (ftr/use-render-thumbnail shape node-ref rendered? thumbnail? disable-thumbnail?)
+            (ftr/use-render-thumbnail page-id shape node-ref rendered? thumbnail? disable-thumbnail?)
 
             on-frame-load
             (fns/use-node-store thumbnail? node-ref rendered?)]

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

@@ -28,7 +28,6 @@
            (when (and (some? node) (nil? @node-ref))
              (let [content (-> (.createElementNS globals/document "http://www.w3.org/2000/svg" "g")
                                (dom/add-class! "frame-content"))]
-               ;;(.appendChild node content)
                (reset! node-ref content)
                (reset! parent-ref node)
                (swap! re-render inc)))))]

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

@@ -33,7 +33,7 @@
 
 (defn use-render-thumbnail
   "Hook that will create the thumbnail thata"
-  [{:keys [id x y width height] :as shape} node-ref rendered? thumbnail? disable?]
+  [page-id {:keys [id x y width height] :as shape} node-ref rendered? thumbnail? disable?]
 
   (let [frame-canvas-ref (mf/use-ref nil)
         frame-image-ref (mf/use-ref nil)
@@ -60,7 +60,7 @@
                    img-node    (mf/ref-val frame-image-ref)
                    thumb-data  (draw-thumbnail-canvas canvas-node img-node)]
                (when (some? thumb-data)
-                 (st/emit! (dw/update-thumbnail id thumb-data))
+                 (st/emit! (dw/update-thumbnail page-id id thumb-data))
                  (reset! image-url nil))))))
 
         on-update-frame

frontend/src/app/worker/thumbnails.cljs

@@ -14,6 +14,7 @@
    [app.util.http :as http]
    [app.worker.impl :as impl]
    [beicon.core :as rx]
+   [debug :refer [debug?]]
    [rumext.alpha :as mf]))
 
 (defn- handle-response
@@ -115,6 +116,9 @@
                  (rx/map render-thumbnail)
                  (rx/mapcat persist-thumbnail)))]
 
-    (->> (request-thumbnail file-id revn)
-         (rx/catch not-found? on-cache-miss)
-         (rx/map on-result))))
+    (if (debug? :disable-thumbnail-cachee)
+      (->> (request-data-for-thumbnail file-id revn)
+           (rx/map render-thumbnail))
+      (->> (request-thumbnail file-id revn)
+           (rx/catch not-found? on-cache-miss)
+           (rx/map on-result)))))

frontend/src/debug.cljs

@@ -61,6 +61,9 @@
 
     ;; Show text fragments outlines
     :text-outline
+
+    ;; Disable thumbnail cache
+    :disable-thumbnail-cachee
     })
 
 ;; These events are excluded when we activate the :events flag