3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-20 06:56:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Ability to ignore background when exporting an artboard

Browse source
This commit is contained in:
Alejandro Alonso 2022-01-13 09:23:48 +01:00 • committed by Andrey Antukh
parent 363b0ba997
commit d9e6e9b017
9 changed files with 75 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -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

4
frontend/src/app/main/ui/render.cljs
View file

@ -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)))

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

@ -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

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

@ -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}]