Merge pull request #2585 from penpot/superalex-fix-show-board-miniature-in-manual-overlay-setting

🐛 Fix show board miniature in manual overlay setting

frontend/resources/styles/main/partials/workspace.scss

@@ -261,9 +261,17 @@ $height-palette-max: 80px;
     }
 
     .render-shapes {
+      height: 100%;
       position: absolute;
       width: 100%;
-      height: 100%;
+    }
+
+    .frame-thumbnail-wrapper {
+      .fills,
+      .strokes,
+      .frame-clip-def {
+        opacity: 0;
+      }
     }
 
     .viewport-controls {

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

@@ -418,7 +418,7 @@
         elem-name (obj/get child "type")
         position  (or (obj/get props "position") 0)
         render-id (or (obj/get props "render-id") (mf/use-ctx muc/render-id))]
-    [:g {:id (dm/fmt "fills-%" (:id shape))}
+    [:g.fills {:id (dm/fmt "fills-%" (:id shape))}
      [:> elem-name (build-fill-props shape child position render-id)]]))
 
 (mf/defc shape-strokes
@@ -442,7 +442,7 @@
     [:*
      (when
       (d/not-empty? (:strokes shape))
-       [:> :g stroke-props
+       [:> :g.strokes stroke-props
         (for [[index value] (-> (d/enumerate (:strokes shape)) reverse)]
           (let [props (build-stroke-props index child value render-id)
                 shape (assoc value :points (:points shape))]

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

@@ -37,7 +37,7 @@
                           :height height
                           :transform transform}))
           path? (some? (.-d props))]
-      [:clipPath {:id (frame-clip-id shape render-id) :class "frame-clip"}
+      [:clipPath.frame-clip-def {:id (frame-clip-id shape render-id) :class "frame-clip"}
        (if path?
          [:> :path props]
          [:> :rect props])])))

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

@@ -30,7 +30,6 @@
       (let [canvas-context (.getContext canvas-node "2d")
             canvas-width   (.-width canvas-node)
             canvas-height  (.-height canvas-node)]
-
         (.clearRect canvas-context 0 0 canvas-width canvas-height)
         (.drawImage canvas-context img-node 0 0 canvas-width canvas-height)
         true))
@@ -92,6 +91,8 @@
         ;; State variable to select whether we show the image thumbnail or the canvas thumbnail
         show-frame-thumbnail (mf/use-state (some? thumbnail-data))
 
+        disable-fills? (or @show-frame-thumbnail (some? @image-url))
+
         on-image-load
         (mf/use-callback
          (fn []
@@ -99,8 +100,6 @@
             #(let [canvas-node (mf/ref-val frame-canvas-ref)
                    img-node    (mf/ref-val frame-image-ref)]
                (when (draw-thumbnail-canvas! canvas-node img-node)
-                 (reset! image-url nil)
-
                  (when @show-frame-thumbnail
                    (reset! show-frame-thumbnail false))
                  ;; If we don't have the thumbnail data saved (normally the first load) we update the data
@@ -229,8 +228,11 @@
                     (some? thumbnail-data)
                     (assoc :thumbnail thumbnail-data))}])
 
-
-       [:foreignObject {:x x :y y :width width :height height}
+       [:foreignObject {:x x
+                        :y y
+                        :width width
+                        :height height
+                        :opacity (when disable-fills? 0)}
         [:canvas.thumbnail-canvas
          {:key (dm/str "thumbnail-canvas-" (:id shape))
           :ref frame-canvas-ref