diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 1a1dec905..53ecfb202 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/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 { diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index 484a74d8e..dfbda44d0 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/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))] diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 00d043f8f..54763d8fa 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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])]))) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index 1715b887a..5f13ae5fb 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/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