github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-27 04:08:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Add UI for webgl rendering setting (under config flag)

Browse Source
This commit is contained in:
Belén Albeza 2026-04-22 15:58:41 +02:00
parent 89a1ee7813
commit 5ad97c0f07
6 changed files with 161 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/src/app/common/flags.cljc
View File

@ -138,6 +138,7 @@
:render-wasm-dpr
;; Show WASM renderer info label (hidden by default).
:render-wasm-info
:render-switch
:hide-release-modal
:subscriptions
:subscriptions-old

35
frontend/src/app/main/ui/settings/options.cljs
View File

@ -7,16 +7,24 @@
(ns app.main.ui.settings.options
(:require-macros [app.main.style :as stl])
(:require
[app.config :as cf]
[app.main.data.notifications :as ntf]
[app.main.data.profile :as du]
[app.main.refs :as refs]
[app.main.router :as rt]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.ds.controls.switch :refer [switch*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.foundations.typography.text :refer [text*]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.theme :as theme]
[rumext.v2 :as mf]))
(def ^:private schema:options-form
[:map {:title "OptionsForm"}
[:lang {:optional true} [:string {:max 20}]]
@ -75,7 +83,23 @@
:data-testid "submit-lang-change"
:class (stl/css :btn-primary)}]]))
;; --- Password Page
(defn ^:private go-settings-feedback
[event]
(dom/prevent-default event)
(st/emit! (rt/nav :settings-feedback)))
(mf/defc webgl-settings*
[{:keys [is-render-enabled]}]
[:section {:class (stl/css :webgl-container)}
[:header {:class (stl/css :webgl-header)}
[:> heading* {:class (stl/css :title) :level 2 :typography t/title-large} (tr "dashboard.webgl-switch.title")]
[:> text* {:as "span" :class (stl/css :beta) :typography t/body-small} (tr "dashboard.webgl-switch.beta")]]
[:> text* {:class (stl/css :description) :typography t/body-medium} (tr "dashboard.webgl-switch.description")]
[:form {:class (stl/css :webgl-form)}
[:> heading* {:level 3 :typography t/headline-small} (tr "dashboard.webgl-switch.status")]
[:> switch* {:label (if is-render-enabled (tr "dashboard.webgl-switch.enabled") (tr "dashboard.webgl-switch.disabled"))
:default-checked is-render-enabled}]]
[:> text* {:typography t/body-medium :class (stl/css :feedback)} [:a {:href "#" :on-click go-settings-feedback :class (stl/css :link)} (tr "dashboard.webgl-switch.feedback") [:> icon* {:icon-id "arrow-up-right" :size "s"}]]]])
(mf/defc options-page
[]
@ -83,7 +107,10 @@
#(dom/set-html-title (tr "title.settings.options")))
[:div {:class (stl/css :dashboard-settings)}
[:div {:class (stl/css :form-container) :data-testid "settings-form"}
[:h2 (tr "labels.settings")]
[:& options-form {}]]])
[:*
[:div {:class (stl/css :form-container) :data-testid "settings-form"}
[:h2 (tr "labels.settings")]
[:& options-form {}]]
(when (contains? cf/flags :render-switch)
[:> webgl-settings* {:is-render-enabled true}])]])

56
frontend/src/app/main/ui/settings/options.scss
View File

@ -5,3 +5,59 @@
// Copyright (c) KALEIDOS INC
@use "./profile" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
.dashboard-settings {
display: grid;
}
.form-container {
&:first-child {
margin-block-end: var(--sp-xxxl);
}
}
/* Copied from profile.scss .form-container, but without included nested
rules, since we want custom styles for it */
.webgl-container {
display: grid;
grid-auto-rows: auto;
gap: var(--sp-s);
width: $sz-500;
margin-block-start: var(--sp-xxxl);
padding-block-start: var(--sp-xxxl);
margin-block-end: $sz-120; /* FIXME: this should be a proper token */
border-block-start: $b-1 solid var(--color-background-quaternary);
color: var(--color-foreground-primary);
}
.webgl-header {
display: flex;
flex-direction: row;
align-items: baseline;
gap: var(--sp-m);
}
.description {
color: var(--color-foreground-secondary);
}
.beta {
color: var(--color-accent-primary);
padding: var(--sp-xxs) var(--sp-s);
border: $b-1 solid var(--color-accent-primary);
border-radius: $br-4;
}
.title {
color: var(--color-foreground-primary);
}
.link {
color: var(--color-accent-primary);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--sp-xs);
}

20
frontend/src/app/main/ui/workspace/main_menu.cljs
View File

@ -226,7 +226,7 @@
(mf/defc preferences-menu*
{::mf/private true
::mf/wrap [mf/memo]}
[{:keys [layout profile toggle-flag on-close toggle-theme]}]
[{:keys [layout profile toggle-flag on-close toggle-theme toggle-render]}]
(let [show-nudge-options
(mf/use-fn
#(modal/show! {:type :nudge-option}))]
@ -321,7 +321,15 @@
"light" (tr "workspace.header.menu.toggle-system-theme")
"system" (tr "workspace.header.menu.toggle-dark-theme")
(tr "workspace.header.menu.toggle-light-theme"))]
[:> shortcuts* {:id :toggle-theme}]]]))
[:> shortcuts* {:id :toggle-theme}]]
(when (contains? cf/flags :render-switch)
[:> dropdown-menu-item* {:on-click toggle-render
:class (stl/css :base-menu-item :submenu-item)
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-render event)))}
[:span {:class (stl/css :item-name)}
(tr "workspace.header.menu.enable-webgl")]])]))
(mf/defc view-menu*
{::mf/private true
@ -888,6 +896,13 @@
(dom/stop-propagation event)
(st/emit! (du/toggle-theme))))
toggle-render
(mf/use-fn
(fn [event]
(dom/stop-propagation event)
(js/console.log "toggle-render")
#_(st/emit! (toggle-render))))
open-plugins-manager
(mf/use-fn
(fn [event]
@ -1067,6 +1082,7 @@
:profile profile
:toggle-flag toggle-flag
:toggle-theme toggle-theme
:toggle-render toggle-render
:on-close close-sub-menu}]
:plugins

27
frontend/translations/en.po
View File

@ -1159,6 +1159,27 @@ msgstr "Type to search results"
msgid "dashboard.unpublish-shared"
msgstr "Unpublish Library"
msgid "dashboard.webgl-switch.title"
msgstr "WebGL rendering"
msgid "dashboard.webgl-switch.beta"
msgstr "Beta"
msgid "dashboard.webgl-switch.description"
msgstr "WebGL rendering can improve performance, but it is in beta and may be less stable. Some visual differences may appear between the canvas, exports (SVG/​​PDF), and view mode."
msgid "dashboard.webgl-switch.status"
msgstr "Status"
msgid "dashboard.webgl-switch.enabled"
msgstr "Enabled"
msgid "dashboard.webgl-switch.disabled"
msgstr "Disabled"
msgid "dashboard.webgl-switch.feedback"
msgstr "Give feedback"
#:src/app/main/ui/workspace/tokens/import_from_library.cljs
msgid "modals.import-library-tokens.title"
msgstr "Import tokens from library?"
@ -5842,6 +5863,12 @@ msgstr "Switch to light theme"
msgid "workspace.header.menu.toggle-system-theme"
msgstr "Switch to system theme"
msgid "workspace.header.menu.enable-webgl"
msgstr "Enable WebGL rendering (beta)"
msgid "workspace.header.menu.disable-webgl"
msgstr "Disable WebGL rendering (beta)"
#: src/app/main/ui/workspace/main_menu.cljs:492
msgid "workspace.header.menu.undo"
msgstr "Undo"

28
frontend/translations/es.po
View File

@ -1234,6 +1234,27 @@ msgstr "Tu nombre"
msgid "dashboard.your-penpot"
msgstr "Tu Penpot"
msgid "dashboard.webgl-switch.title"
msgstr "Renderizado WebGL"
msgid "dashboard.webgl-switch.beta"
msgstr "Beta"
msgid "dashboard.webgl-switch.description"
msgstr "El renderizado WebGL puede mejorar el rendimiento, pero está en beta y puede ser menos estable. Pueden aparecer diferencias visuales entre el lienzo, las exportaciones (SVG/PDF) y el modo de vista."
msgid "dashboard.webgl-switch.status"
msgstr "Estado"
msgid "dashboard.webgl-switch.enabled"
msgstr "Activado"
msgid "dashboard.webgl-switch.disabled"
msgstr "Desactivado"
msgid "dashboard.webgl-switch.feedback"
msgstr "Enviar comentarios"
#: src/app/main/ui/alert.cljs:35
msgid "ds.alert-ok"
msgstr "Ok"
@ -5800,6 +5821,13 @@ msgstr "Cambiar a tema claro"
msgid "workspace.header.menu.toggle-system-theme"
msgstr "Cambiar a tema del sistema"
msgid "workspace.header.menu.enable-webgl"
msgstr "Activar renderizado WebGL (beta)"
msgid "workspace.header.menu.disable-webgl"
msgstr "Desactivar renderizado WebGL (beta)"
#: src/app/main/ui/workspace/main_menu.cljs:492
msgid "workspace.header.menu.undo"
msgstr "Deshacer"