From d9e6e9b017c30c37cf635b705f544f53636ba47d Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Thu, 13 Jan 2022 09:23:48 +0100 Subject: [PATCH] :sparkles: Ability to ignore background when exporting an artboard --- CHANGES.md | 1 + common/src/app/common/pages/common.cljc | 1 + common/src/app/common/pages/init.cljc | 3 +- .../src/app/main/data/workspace/colors.cljs | 15 ++++- frontend/src/app/main/ui/render.cljs | 4 ++ .../workspace/sidebar/options/menus/fill.cljs | 61 +++++++++++++------ .../sidebar/options/shapes/frame.cljs | 4 +- frontend/translations/en.po | 6 +- frontend/translations/es.po | 6 +- 9 files changed, 75 insertions(+), 26 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 6057916df2..c2bd44185b 100644 --- a/CHANGES.md +++ b/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). diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index a8590b1390..41e1e9e3a3 100644 --- a/common/src/app/common/pages/common.cljc +++ b/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 diff --git a/common/src/app/common/pages/init.cljc b/common/src/app/common/pages/init.cljc index ef6872968b..0a5713cc33 100644 --- a/common/src/app/common/pages/init.cljc +++ b/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 diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 92ad458959..e2aaa734d5 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index f7107e7188..1114fb417e 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/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))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 7fcabb0b06..3d26b8daa0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/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) - (fn [_] - (st/emit! (dc/change-fill ids {:color cp/default-color - :opacity 1})))) + (mf/deps ids) + (fn [_] + (st/emit! (dc/change-fill ids {:color cp/default-color + :opacity 1})))) on-delete (mf/use-callback - (mf/deps ids) - (fn [_] - (st/emit! (dc/change-fill ids (into {} uc/empty-color))))) + (mf/deps ids) + (fn [_] + (st/emit! (dc/change-fill ids (into {} uc/empty-color))))) on-change (mf/use-callback - (mf/deps ids) - (fn [color] - (let [remove-multiple (fn [[_ value]] (not= value :multiple)) - color (into {} (filter remove-multiple) color)] - (st/emit! (dc/change-fill ids color))))) + (mf/deps ids) + (fn [color] + (let [remove-multiple (fn [[_ value]] (not= value :multiple)) + color (into {} (filter remove-multiple) color)] + (st/emit! (dc/change-fill ids color))))) on-detach (mf/use-callback - (mf/deps ids) - (fn [] - (let [remove-multiple (fn [[_ value]] (not= value :multiple)) - color (-> (into {} (filter remove-multiple) color) - (assoc :id nil :file-id nil))] - (st/emit! (dc/change-fill ids color))))) + (mf/deps ids) + (fn [] + (let [remove-multiple (fn [[_ value]] (not= value :multiple)) + color (-> (into {} (filter remove-multiple) color) + (assoc :id nil :file-id nil))] + (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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 2a1cac8192..f6965a83e0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/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}] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 308c32acd9..e22b152570 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 711af1e42b..ff83682a26 100644 --- a/frontend/translations/es.po +++ b/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"