✨ Allow removing background from frames

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

@@ -10,8 +10,6 @@
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
-(def frame-default-props {:fill-color "#ffffff"})
-
 (defn frame-shape
   [shape-wrapper]
   (mf/fnc frame-shape
@@ -21,8 +19,11 @@
           shape      (unchecked-get props "shape")
           {:keys [width height]} shape
 
-          props (-> (merge frame-default-props shape)
+          has-background? (or (some? (:fill-color shape))
-                    (attrs/extract-style-attrs)
+                              (some? (:fill-color-gradient shape)))
+          has-stroke? (not= :none (:stroke-style shape))
+
+          props (-> (attrs/extract-style-attrs shape)
                     (obj/merge!
                      #js {:x 0
                           :y 0
@@ -30,7 +31,8 @@
                           :height height
                           :className "frame-background"}))]
       [:*
-       [:> :rect props]
+       (when (or has-background? has-stroke?)
+         [:> :rect props])
        (for [item childs]
          [:& shape-wrapper {:frame shape
                             :shape item

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

@@ -65,6 +65,7 @@
         objects           (mf/use-memo
                            (mf/deps objects object-modifiers)
                            #(cp/merge-modifiers objects object-modifiers))
+        background        (get options :background "#E8E9EA")
 
         ;; STATE
         alt?              (mf/use-state false)
@@ -157,7 +158,8 @@
 
     [:div.viewport
      [:div.viewport-overlays
-      [:& wtr/frame-renderer {:objects objects}]
+      [:& wtr/frame-renderer {:objects objects
+                              :background background}]
 
       (when show-comments?
         [:& comments/comments-layer {:vbox vbox
@@ -185,7 +187,7 @@
        :width (:width vport 0)
        :height (:height vport 0)
        :view-box (utils/format-viewbox vbox)
-       :style {:background-color (get options :background "#E8E9EA")
+       :style {:background-color background
                :pointer-events "none"}}
 
       [:& use/export-page {:options options}]

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

@@ -17,7 +17,7 @@
 
 (mf/defc frame-thumbnail
   "Renders the canvas and image for a frame thumbnail and stores its value into the shape"
-  [{:keys [shape on-thumbnail-data on-frame-not-found]}]
+  [{:keys [shape background on-thumbnail-data on-frame-not-found]}]
 
   (let [thumbnail-img (mf/use-ref nil)
         thumbnail-canvas (mf/use-ref nil)
@@ -45,12 +45,21 @@
 
         on-image-load
         (mf/use-callback
-         (mf/deps on-thumbnail-data)
+         (mf/deps on-thumbnail-data background)
          (fn []
-           (let [canvas-node (mf/ref-val thumbnail-canvas)
+           (let [canvas-node    (mf/ref-val thumbnail-canvas)
-                 img-node (mf/ref-val thumbnail-img)
+                 img-node       (mf/ref-val thumbnail-img)
+
                  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)
+                 _ (.rect canvas-context 0 0 canvas-width canvas-height)
+                 _ (set! (.-fillStyle canvas-context) background)
+                 _ (.fill canvas-context)
                  _ (.drawImage canvas-context img-node 0 0)
+
                  data (.toDataURL canvas-node "image/jpeg" 0.8)]
              (on-thumbnail-data data))))]
 
@@ -72,6 +81,7 @@
   {::mf/wrap-props false}
   [props]
   (let [objects (obj/get props "objects")
+        background (obj/get props "background")
 
         ;; Id of the current frame being rendered
         shape-id (mf/use-state nil)
@@ -131,5 +141,6 @@
     (when (and (some? @shape-id) (contains? objects @shape-id))
       [:& frame-thumbnail {:key (str "thumbnail-" @shape-id)
                            :shape (get objects @shape-id)
+                           :background background
                            :on-thumbnail-data on-thumbnail-data
                            :on-frame-not-found on-frame-not-found}])))