From 100caa794db01ea7916a1d882deff6aa48e6586b Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 11 Jun 2026 13:23:00 +0200 Subject: [PATCH] :tada: Add background blur info to plugins API --- common/src/app/common/geom/shapes/bounds.cljc | 3 -- frontend/src/app/main/ui/shapes/export.cljs | 4 +- .../workspace/sidebar/options/menus/blur.cljs | 2 +- frontend/src/app/plugins/format.cljs | 4 +- frontend/src/app/plugins/parser.cljs | 2 - frontend/src/app/plugins/shape.cljs | 6 ++- mcp/packages/server/data/api_types.yml | 43 ++++++++++++++++--- plugins/libs/plugin-types/index.d.ts | 12 +++--- 8 files changed, 52 insertions(+), 24 deletions(-) diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index e87ff975d1..794d578c7d 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/common/src/app/common/geom/shapes/bounds.cljc @@ -42,9 +42,6 @@ [{:id "shape" :type :blend-filters}] (->> shape :shadow (apply-filters :style :inner-shadow)) - ;; Background blur won't work in current SVG specification - ;; We can revisit this in the future - #_(->> shape :background-blur list (apply-filters :type :background-blur)) (->> shape :blur list (apply-filters :type :layer-blur)))) (defn- calculate-filter-bounds diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index 018544d59b..39c2ecfa79 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -217,8 +217,8 @@ :penpot:spread (str spread)}]))) (defn- export-blur-data [{:keys [blur]}] - (when-let [{:keys [type hidden value]} blur] - (mf/html + (when-let [{:keys [type hidden value]} blur] + (mf/html [:> "penpot:blur" #js {:penpot:blur-type (d/name type) :penpot:hidden (str hidden) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index dbafa36ab5..334061eb2e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -209,7 +209,7 @@ (and (identical? o-blur-values n-blur-values) (identical? o-background-blur-values n-background-blur-values))))) -(mf/defc blur-menu* +(mf/defc blur-menu* {::mf/wrap [#(mf/memo' % check-props)]} [{:keys [ids type values]}] (let [render-wasm? (features/use-feature "render-wasm/v1") diff --git a/frontend/src/app/plugins/format.cljs b/frontend/src/app/plugins/format.cljs index 2eeec73024..c0b556bdab 100644 --- a/frontend/src/app/plugins/format.cljs +++ b/frontend/src/app/plugins/format.cljs @@ -232,16 +232,14 @@ ;; export interface Blur { ;; id?: string; -;; type?: 'layer-blur' | 'background-blur'; ;; value?: number; ;; hidden?: boolean; ;; } (defn format-blur - [{:keys [id type value hidden] :as blur}] + [{:keys [id value hidden] :as blur}] (when (some? blur) (obj/without-empty #js {:id (format-id id) - :type (format-key type) :value value :hidden hidden}))) diff --git a/frontend/src/app/plugins/parser.cljs b/frontend/src/app/plugins/parser.cljs index ca006dbf4c..3d6b481b50 100644 --- a/frontend/src/app/plugins/parser.cljs +++ b/frontend/src/app/plugins/parser.cljs @@ -237,7 +237,6 @@ ;; export interface Blur { ;; id?: string; -;; type?: 'layer-blur'; ;; value?: number; ;; hidden?: boolean; ;; } @@ -246,7 +245,6 @@ (when (some? blur) (d/without-nils {:id (-> (obj/get blur "id") parse-id) - :type (-> (obj/get blur "type") parse-keyword) :value (obj/get blur "value") :hidden (obj/get blur "hidden")}))) diff --git a/frontend/src/app/plugins/shape.cljs b/frontend/src/app/plugins/shape.cljs index 3422320fa2..cbe2b22831 100644 --- a/frontend/src/app/plugins/shape.cljs +++ b/frontend/src/app/plugins/shape.cljs @@ -509,7 +509,8 @@ (if (nil? value) (st/emit! (dwsh/update-shapes [id] #(dissoc % :blur))) (let [id (obj/get self "$id") - value (blur-defaults (parser/parse-blur value))] + value (blur-defaults (parser/parse-blur value)) + value (assoc value :type :layer-blur)] (cond (not (sm/validate ctsb/schema:blur value)) (u/not-valid plugin-id :blur value) @@ -528,7 +529,8 @@ (if (nil? value) (st/emit! (dwsh/update-shapes [id] #(dissoc % :background-blur))) (let [id (obj/get self "$id") - value (background-blur-defaults (parser/parse-blur value))] + value (background-blur-defaults (parser/parse-blur value)) + value (assoc value :type :background-blur)] (cond (not (sm/validate ctsbb/schema:background-blur value)) (u/not-valid plugin-id :background-blur value) diff --git a/mcp/packages/server/data/api_types.yml b/mcp/packages/server/data/api_types.yml index de532d4eb9..a3c00c0225 100644 --- a/mcp/packages/server/data/api_types.yml +++ b/mcp/packages/server/data/api_types.yml @@ -960,12 +960,11 @@ Blur: ============== Represents blur properties in Penpot. - This interface includes properties for defining the type and intensity of a blur effect, along with its visibility. + This interface includes properties for defining the intensity of a blur effect, along with its visibility. ``` interface Blur { id?: string; - type?: "layer-blur"; value?: number; hidden?: boolean; } @@ -980,13 +979,44 @@ Blur: ``` The optional unique identifier for the blur effect. - type: |- + value: |- ``` - type?: "layer-blur" + value?: number ``` - The optional type of the blur effect. - Currently, only 'layer-blur' is supported. + The optional intensity value of the blur effect. + hidden: |- + ``` + hidden?: boolean + ``` + + Specifies whether the blur effect is hidden. + Defaults to false if omitted. +BackgroundBlur: + overview: |- + Interface BackgroundBlur + ============== + + Represents background blur properties in Penpot. + This interface includes properties for defining the intensity of a blur effect, along with its visibility. + + ``` + interface Blur { + id?: string; + value?: number; + hidden?: boolean; + } + ``` + + Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer + members: + Properties: + id: |- + ``` + id?: string + ``` + + The optional unique identifier for the blur effect. value: |- ``` value?: number @@ -15436,6 +15466,7 @@ ShapeBase: | "luminosity"; shadows: Shadow[]; blur?: Blur; + backgroundBlur?: Blur; exports: Export[]; boardX: number; boardY: number; diff --git a/plugins/libs/plugin-types/index.d.ts b/plugins/libs/plugin-types/index.d.ts index 18d8eafcfa..c283c6f808 100644 --- a/plugins/libs/plugin-types/index.d.ts +++ b/plugins/libs/plugin-types/index.d.ts @@ -194,11 +194,6 @@ export interface Blur { * The optional unique identifier for the blur effect. */ id?: string; - /** - * The optional type of the blur effect. - * Currently, only 'layer-blur' is supported. - */ - type?: 'layer-blur'; /** * The optional intensity value of the blur effect. */ @@ -3717,6 +3712,13 @@ export interface ShapeBase extends PluginData { */ blur?: Blur; + /** + * The background blur effect applied to the shape. + * Background blur creates a blur effect on the content behind the shape, + * rather than on the shape's own content. + */ + backgroundBlur?: Blur; + /** * The export settings of the shape. */