✨ Ability to ignore background when exporting an artboard

CHANGES.md

@@ -5,6 +5,7 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
+- Ability to ignore background when exporting an artboard [Taiga #1395](https://tree.taiga.io/project/penpot/us/1395).
 - Show color hex or name on hover [Taiga #2413](https://tree.taiga.io/project/penpot/us/2413).
 - Add shortcut to create artboard from selected objects [Taiga #2412](https://tree.taiga.io/project/penpot/us/2412).
 - Add shortcut for opacity [Taiga #2442](https://tree.taiga.io/project/penpot/us/2442).

common/src/app/common/pages/common.cljc

@@ -20,6 +20,7 @@
    :fill-color-gradient   :fill-group
    :fill-color-ref-file   :fill-group
    :fill-color-ref-id     :fill-group
+   :show-fill-on-export?  :fill-group
    :content               :content-group
    :hidden                :visibility-group
    :blocked               :modifiable-group

common/src/app/common/pages/init.cljc

@@ -35,7 +35,8 @@
   {:frame-id uuid/zero
    :fill-color clr/white
    :fill-opacity 1
-   :shapes []})
+   :shapes []
+   :show-fill-on-export? true})
 
 (def ^:private minimal-shapes
   [{:type :rect

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

@@ -128,6 +128,7 @@
                            ::fill-color-ref-file nil
                            :fill-color-ref-id nil
                            :fill-opacity nil}
+
                     (contains? color :color)
                     (assoc :fill-color (:color color))
 
@@ -142,11 +143,23 @@
 
                     (contains? color :opacity)
                     (assoc :fill-opacity (:opacity color)))]
-        
+
         (rx/concat
          (rx/from (map #(dwt/update-text-attrs {:id % :attrs attrs}) text-ids))
          (rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs)))))))))
 
+(defn change-show-fill-on-export
+  [ids show-fill-on-export?]
+  (ptk/reify ::change-show-fill-on-export
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [page-id   (:current-page-id state)
+            objects   (wsh/lookup-page-objects state page-id)
+            is-text?  #(= :text (:type (get objects %)))
+            shape-ids (filter (complement is-text?) ids)
+            attrs {:show-fill-on-export? show-fill-on-export?}]
+        (rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs))))))))
+
 (defn change-stroke
   [ids color]
   (ptk/reify ::change-stroke

frontend/src/app/main/ui/render.cljs

@@ -73,6 +73,10 @@
         objects  (reduce updt-fn objects mod-ids)
         object   (get objects object-id)
 
+        object (cond-> object
+                     (not (:show-fill-on-export? object))
+                     (assoc :fill-color nil :fill-opacity 0))
+
         {:keys [x y width height] :as bs} (calc-bounds object objects)
         [_ _ width height :as coords] (->> [x y width height] (map #(* % zoom)))
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs

@@ -12,6 +12,7 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [app.util.color :as uc]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
@@ -22,6 +23,9 @@
    :fill-color-ref-file
    :fill-color-gradient])
 
+(def fill-attrs-shape
+  (conj fill-attrs :show-fill-on-export?))
+
 (mf/defc fill-menu
   {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]}
   [{:keys [ids type values disable-remove?] :as props}]
@@ -39,37 +43,44 @@
                :file-id (:fill-color-ref-file values)
                :gradient (:fill-color-gradient values)}
 
+        show-fill-on-export? (:show-fill-on-export? values true)
+
         on-add
         (mf/use-callback
-          (mf/deps ids)
+         (mf/deps ids)
-          (fn [_]
+         (fn [_]
-            (st/emit! (dc/change-fill ids {:color cp/default-color
+           (st/emit! (dc/change-fill ids {:color cp/default-color
-                                           :opacity 1}))))
+                                          :opacity 1}))))
 
         on-delete
         (mf/use-callback
-          (mf/deps ids)
+         (mf/deps ids)
-          (fn [_]
+         (fn [_]
-            (st/emit! (dc/change-fill ids (into {} uc/empty-color)))))
+           (st/emit! (dc/change-fill ids (into {} uc/empty-color)))))
 
         on-change
         (mf/use-callback
-          (mf/deps ids)
+         (mf/deps ids)
-          (fn [color]
+         (fn [color]
-            (let [remove-multiple (fn [[_ value]] (not= value :multiple))
+           (let [remove-multiple (fn [[_ value]] (not= value :multiple))
-                  color (into {} (filter remove-multiple) color)]
+                 color (into {} (filter remove-multiple) color)]
-              (st/emit! (dc/change-fill ids color)))))
+             (st/emit! (dc/change-fill ids color)))))
 
         on-detach
         (mf/use-callback
-          (mf/deps ids)
+         (mf/deps ids)
-          (fn []
+         (fn []
-            (let [remove-multiple (fn [[_ value]] (not= value :multiple))
+           (let [remove-multiple (fn [[_ value]] (not= value :multiple))
-                  color (-> (into {} (filter remove-multiple) color)
+                 color (-> (into {} (filter remove-multiple) color)
-                            (assoc :id nil :file-id nil))]
+                           (assoc :id nil :file-id nil))]
-              (st/emit! (dc/change-fill ids color)))))
+             (st/emit! (dc/change-fill ids color)))))
 
-        ]
+        on-change-show-fill-on-export
+        (mf/use-callback
+         (mf/deps ids)
+         (fn [event]
+           (let [value (-> event dom/get-target dom/checked?)]
+             (st/emit! (dc/change-show-fill-on-export ids value)))))]
 
     (if show?
       [:div.element-set
@@ -82,7 +93,17 @@
         [:& color-row {:color color
                        :title (tr "workspace.options.fill")
                        :on-change on-change
-                       :on-detach on-detach}]]]
+                       :on-detach on-detach}]
+
+        (when (contains? values :show-fill-on-export?)
+          [:div.input-checkbox
+           [:input {:type "checkbox"
+                    :id "show-fill-on-export"
+                    :checked show-fill-on-export?
+                    :on-change on-change-show-fill-on-export}]
+
+           [:label {:for "show-fill-on-export"}
+            (tr "workspace.options.show-fill-on-export")]])]]
 
       [:div.element-set
        [:div.element-set-title

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

@@ -14,7 +14,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -309,7 +309,7 @@
                      :values layer-values}]
      [:& fill-menu {:ids ids
                     :type type
-                    :values (select-keys shape fill-attrs)}]
+                    :values (select-keys shape fill-attrs-shape)}]
      [:& stroke-menu {:ids ids
                       :type type
                       :values stroke-values}]

frontend/translations/en.po

@@ -2287,7 +2287,7 @@ msgstr "Export"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
 msgid "workspace.options.export-object"
-msgstr "Export shape"
+msgstr "Export"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
 msgid "workspace.options.export.suffix"
@@ -2301,6 +2301,10 @@ msgstr "Exporting…"
 msgid "workspace.options.fill"
 msgstr "Fill"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+msgid "workspace.options.show-fill-on-export"
+msgstr "Show in exports"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.flows.add-flow-start"
 msgstr "Add flow start"

frontend/translations/es.po

@@ -2302,7 +2302,7 @@ msgstr "Exportar"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs, src/app/main/ui/handoff/exports.cljs
 msgid "workspace.options.export-object"
-msgstr "Exportar forma"
+msgstr "Exportar"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
 msgid "workspace.options.export.suffix"
@@ -2316,6 +2316,10 @@ msgstr "Exportando"
 msgid "workspace.options.fill"
 msgstr "Relleno"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+msgid "workspace.options.show-fill-on-export"
+msgstr "Mostrar al exportar"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.flows.add-flow-start"
 msgstr "Añadir inicio de flujo"