Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

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

1
common/src/app/common/pages/common.cljc
View file

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

3
common/src/app/common/pages/init.cljc
View file

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

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

6
frontend/translations/en.po
View file

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

6
frontend/translations/es.po
View file

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