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

🎉 Add support for WEBP format on shape export

Browse source 
It is very convenient to be able to export WEBP right from penpot.
Otherwise users have to first download to PNG then convert it locally.

---

Playwright only supports JPEG and PNG. So in order to support WEBP I had
to first generate a PNG and then convert it afterwards.

Signed-off-by: Dalai Felinto <dalai@blender.org>
This commit is contained in:
Dalai Felinto 2025-03-13 15:15:30 +00:00 • committed by Andrey Antukh
parent e3b3fa3342
commit f450c9dbe3
13 changed files with 32 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/data/exports/assets.cljs
View file

@ -266,10 +266,10 @@
(defn export-shapes-event
[exports origin]
(let [types (reduce (fn [counts {:keys [type]}]
(if (#{:png :pdf :svg :jpeg} type)
(if (#{:png :jpeg :webp :svg :pdf} type)
(update counts type inc)
counts))
{:png 0, :pdf 0, :svg 0, :jpeg 0}
{:png 0, :jpeg 0, :webp 0, :pdf 0, :svg 0}
exports)]
(ptk/event
::ev/event (merge types

3
frontend/src/app/main/ui/inspect/exports.cljs
View file

@ -37,7 +37,7 @@
scale-enabled?
(mf/use-callback
(fn [export]
(#{:png :jpeg} (:type export))))
(#{:png :jpeg :webp} (:type export))))
in-progress? (:in-progress xstate)
@ -123,6 +123,7 @@
format-options [{:value "png" :label "PNG"}
{:value "jpeg" :label "JPG"}
{:value "webp" :label "WEBP"}
{:value "svg" :label "SVG"}
{:value "pdf" :label "PDF"}]]

6
frontend/src/app/main/ui/inspect/exports.scss
View file

@ -51,7 +51,7 @@
.element-group {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(9, 1fr);
column-gap: $s-4;
.action-btn {
@extend .button-tertiary;
@ -64,13 +64,13 @@
}
.input-wrapper {
grid-column: span 7;
grid-column: span 8;
display: grid;
grid-template-columns: subgrid;
}
.format-select {
grid-column: span 2;
grid-column: span 3;
padding: 0;
.dropdown-upwards {

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

@ -53,7 +53,7 @@
scale-enabled?
(mf/use-fn
(fn [export]
(#{:png :jpeg} (:type export))))
(#{:png :jpeg :webp} (:type export))))
on-download
(mf/use-fn
@ -173,6 +173,7 @@
format-options [{:value "png" :label "PNG"}
{:value "jpeg" :label "JPG"}
{:value "webp" :label "WEBP"}
{:value "svg" :label "SVG"}
{:value "pdf" :label "PDF"}]]

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View file

@ -32,18 +32,18 @@
.element-group {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(9, 1fr);
column-gap: $s-4;
}
.input-wrapper {
grid-column: span 7;
grid-column: span 8;
display: grid;
grid-template-columns: subgrid;
}
.format-select {
grid-column: span 2;
grid-column: span 3;
padding: 0;
.dropdown-upwards {

2
frontend/src/app/plugins/format.cljs
View file

@ -261,7 +261,7 @@
:hidden hidden})))
;; export interface Export {
;; type: 'png' | 'jpeg' | 'svg' | 'pdf';
;; type: 'png' | 'jpeg' | 'webp' | 'svg' | 'pdf';
;; scale: number;
;; suffix: string;
;; }

2
frontend/src/app/plugins/parser.cljs
View file

@ -243,7 +243,7 @@
;; export interface Export {
;; type: 'png' | 'jpeg' | 'svg' | 'pdf';
;; type: 'png' | 'jpeg' | 'webp' | 'svg' | 'pdf';
;; scale: number;
;; suffix: string;
;; }