🐛 Fix problems with thumbnails generation

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

@@ -65,7 +65,7 @@
          [:& frame-wrapper {:shape item
                             :key (:id item)
                             :objects (get frame-objects (:id item))
-                            :thumbnail? (not (get active-frames (:id item) false))}]
+                            :thumbnail? (not (contains? active-frames (:id item)))}]
 
          [:& shape-wrapper {:shape item
                             :key (:id item)}]))]))

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

@@ -114,10 +114,10 @@
              (when (not @rendered?) (reset! rendered? true)))))
 
         [:g.frame-container {:key "frame-container" :ref on-frame-load}
-         thumb-renderer
+         [:g.frame-thumbnail {:id (dm/str "thumbnail-container-" (:id shape))}
-
-         [:g.frame-thumbnail
           [:> frame/frame-thumbnail {:key (dm/str (:id shape))
                                      :shape (cond-> shape
                                               (some? thumbnail-data)
-                                              (assoc :thumbnail thumbnail-data))}]]]))))
+                                              (assoc :thumbnail thumbnail-data))}]
+
+          thumb-renderer]]))))

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

@@ -14,6 +14,7 @@
    [app.util.dom :as dom]
    [app.util.object :as obj]
    [app.util.timers :as ts]
+   [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
 (defn- draw-thumbnail-canvas
@@ -44,43 +45,51 @@
 
         thumbnail-ref? (mf/use-var thumbnail?)
 
+        updates-str (mf/use-memo #(rx/subject))
+
         on-image-load
         (mf/use-callback
          (fn []
-           (let [canvas-node (mf/ref-val frame-canvas-ref)
+           (ts/raf
-                 img-node    (mf/ref-val frame-image-ref)
+            #(let [canvas-node (mf/ref-val frame-canvas-ref)
-                 thumb-data  (draw-thumbnail-canvas canvas-node img-node)]
+                   img-node    (mf/ref-val frame-image-ref)
-             (st/emit! (dw/update-thumbnail id thumb-data))
+                   thumb-data  (draw-thumbnail-canvas canvas-node img-node)]
-             (reset! image-url nil))))
+               (st/emit! (dw/update-thumbnail id thumb-data))
+               (reset! image-url nil)))))
 
-        on-change
+        on-update-frame
-        (mf/use-callback
+        (fn []
-         (fn []
+          (when (and (some? @node-ref) (not @disable-ref?))
-           (when (and (some? @node-ref) (not @disable-ref?))
+            (let [node @node-ref
-             (let [node @node-ref]
+                  frame-html (dom/node->xml node)
-               (ts/schedule-on-idle
+                  {:keys [x y width height]} @shape-ref
-                #(let [frame-html (dom/node->xml node)
+                  svg-node
-                       {:keys [x y width height]} @shape-ref
+                  (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
-                       svg-node
+                      (dom/set-property! "version" "1.1")
-                       (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
+                      (dom/set-property! "viewBox" (dm/str x " " y " " width " " height))
-                           (dom/set-property! "version" "1.1")
+                      (dom/set-property! "width" width)
-                           (dom/set-property! "viewBox" (dm/str x " " y " " width " " height))
+                      (dom/set-property! "height" height)
-                           (dom/set-property! "width" width)
+                      (dom/set-property! "fill" "none")
-                           (dom/set-property! "height" height)
+                      (obj/set! "innerHTML" frame-html))
-                           (dom/set-property! "fill" "none")
+                  img-src  (-> svg-node dom/node->xml dom/svg->data-uri)]
-                           (obj/set! "innerHTML" frame-html))
+              (reset! image-url img-src))))
-                       img-src  (-> svg-node dom/node->xml dom/svg->data-uri)]
-                   (reset! image-url img-src)))))))
 
         on-load-frame-dom
         (mf/use-callback
          (fn [node]
            (when (and (some? node) (nil? @observer-ref))
-             (on-change [])
+             (rx/push! updates-str :update)
-             (let [observer (js/MutationObserver. on-change)]
+             (let [observer (js/MutationObserver. (partial rx/push! updates-str))]
                (.observe observer node #js {:childList true :attributes true :characterData true :subtree true})
                (reset! observer-ref observer)))))]
 
+    (mf/use-effect
+     (fn []
+       (let [subid (->> updates-str
+                        (rx/debounce 200)
+                        (rx/subs on-update-frame))]
+         #(rx/dispose! subid))))
+
     (mf/use-effect
      (mf/deps disable?)
      (fn []
@@ -104,7 +113,7 @@
     [on-load-frame-dom
      (when (some? @image-url)
        (mf/html
-        [:g.thumbnail-rendering {:opacity 0}
+        [:g.thumbnail-rendering
          [:foreignObject {:x x :y y :width width :height height}
           [:canvas {:ref frame-canvas-ref
                     :width fixed-width

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -90,7 +90,7 @@
         hover             (mf/use-state nil)
         hover-disabled?   (mf/use-state false)
         frame-hover       (mf/use-state nil)
-        active-frames     (mf/use-state {})
+        active-frames     (mf/use-state #{})
 
         ;; REFS
         viewport-ref      (mf/use-ref nil)
@@ -183,7 +183,7 @@
     (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids @hover-disabled? focus zoom)
     (hooks/setup-viewport-modifiers modifiers base-objects)
     (hooks/setup-shortcuts node-editing? drawing-path?)
-    (hooks/setup-active-frames base-objects vbox hover active-frames zoom)
+    (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom)
 
     [:div.viewport
      [:div.viewport-overlays {:ref overlays-ref}

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -219,32 +219,21 @@
          (gsh/overlaps? frame vbox))))
 
 (defn setup-active-frames
-  [objects vbox hover active-frames zoom]
+  [objects hover-ids selected active-frames zoom]
 
   (mf/use-effect
-   (mf/deps vbox)
+   (mf/deps objects @hover-ids selected zoom)
-
    (fn []
-     (swap! active-frames
+     (when (some? @hover-ids)
-            (fn [active-frames]
+       (let [hover-frame (when (> zoom 0.25) (last @hover-ids))
-              (let [set-active-frames
+             new-active-frames (if (some? hover-frame) #{hover-frame} #{})
-                    (fn [active-frames id active?]
+             new-active-frames
-                      (cond-> active-frames
+             (into new-active-frames
-                        (and active? (inside-vbox vbox objects id))
+                   (comp
-                        (assoc id true)))]
+                    (filter #(not= :frame (get-in objects [% :type])))
-                (reduce-kv set-active-frames {} active-frames))))))
+                    (map #(get-in objects [% :frame-id])))
-
+                   selected) ]
-  (mf/use-effect
+         (reset! active-frames new-active-frames))))))
-   (mf/deps @hover @active-frames zoom)
-   (fn []
-     (let [frame-id (if (= :frame (:type @hover))
-                      (:id @hover)
-                      (:frame-id @hover))]
-       (if (< zoom 0.25)
-         (when (some? @active-frames)
-           (reset! active-frames nil))
-         (when (and (some? frame-id)(not (contains? @active-frames frame-id)))
-           (reset! active-frames {frame-id true})))))))
 
 ;; NOTE: this is executed on each page change, maybe we need to move
 ;; this shortcuts outside the viewport?

frontend/src/app/main/ui/workspace/viewport/utils.cljs

@@ -86,7 +86,7 @@
         mask?  (and group? masked-group?)
 
         ;; When the shape is a frame we maybe need to move its thumbnail
-        thumb-node (when frame? (dom/query (str "#thumbnail-" id)))]
+        thumb-node (when frame? (dom/query (str "#thumbnail-container-" id)))]
 
     (cond
       frame?