Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 03:31:24 -05:00
Code Issues Activity

✨ Adds blur effect for shapes

Browse source
This commit is contained in:
alonso.torres 2020-10-20 15:38:02 +02:00 • committed by Hirunatan
parent ca83e13802
commit 6b240da892
16 changed files with 358 additions and 116 deletions

79
common/app/common/pages.cljc
View file

@ -55,7 +55,7 @@
(>= % min-safe-int)
(<= % max-safe-int)))
;; GRADIENTS
(s/def :internal.gradient.stop/color ::string)
(s/def :internal.gradient.stop/opacity ::safe-number)
@ -85,6 +85,63 @@
:internal.gradient/width
:internal.gradient/stops]))
;;; COLORS
(s/def :internal.color/name ::string)
(s/def :internal.color/value (s/nilable ::string))
(s/def :internal.color/color (s/nilable ::string))
(s/def :internal.color/opacity (s/nilable ::safe-number))
(s/def :internal.color/gradient (s/nilable ::gradient))
(s/def ::color
(s/keys :opt-un [::id
:internal.color/name
:internal.color/value
:internal.color/color
:internal.color/opacity
:internal.color/gradient]))
;;; SHADOW EFFECT
(s/def :internal.shadow/id uuid?)
(s/def :internal.shadow/style #{:drop-shadow :inner-shadow})
(s/def :internal.shadow/color ::color)
(s/def :internal.shadow/offset-x ::safe-number)
(s/def :internal.shadow/offset-y ::safe-number)
(s/def :internal.shadow/blur ::safe-number)
(s/def :internal.shadow/spread ::safe-number)
(s/def :internal.shadow/hidden boolean?)
(s/def :internal.shadow/shadow
(s/keys :req-un [:internal.shadow/id
:internal.shadow/style
:internal.shadow/color
:internal.shadow/offset-x
:internal.shadow/offset-y
:internal.shadow/blur
:internal.shadow/spread
:internal.shadow/hidden]))
(s/def ::shadow
(s/coll-of :internal.shadow/shadow :kind vector?))
;;; BLUR EFFECT
(s/def :internal.blur/id uuid?)
(s/def :internal.blur/type #{:layer-blur})
(s/def :internal.blur/value ::safe-number)
(s/def :internal.blur/hidden boolean?)
(s/def ::blur
(s/keys :req-un [:internal.blur/id
:internal.blur/type
:internal.blur/value
:internal.blur/hidden]))
;; Page Options
(s/def :internal.page.grid.color/value string?)
(s/def :internal.page.grid.color/opacity ::safe-number)
@ -175,6 +232,8 @@
(s/def :internal.shape/width ::safe-number)
(s/def :internal.shape/height ::safe-number)
(s/def :internal.shape/index integer?)
(s/def :internal.shape/shadow ::shadow)
(s/def :internal.shape/blur ::blur)
(s/def :internal.shape/x1 ::safe-number)
(s/def :internal.shape/y1 ::safe-number)
@ -246,7 +305,9 @@
:internal.shape/interactions
:internal.shape/selrect
:internal.shape/points
:internal.shape/masked-group?]))
:internal.shape/masked-group?
:internal.shape/shadow
:internal.shape/blur]))
(def component-sync-attrs {:fill-color :fill-group
:fill-color-ref-file :fill-group
@ -295,20 +356,6 @@
:internal.page/objects]))
(s/def :internal.color/name ::string)
(s/def :internal.color/value (s/nilable ::string))
(s/def :internal.color/color (s/nilable ::string))
(s/def :internal.color/opacity (s/nilable ::safe-number))
(s/def :internal.color/gradient (s/nilable ::gradient))
(s/def ::color
(s/keys :req-un [::id
:internal.color/name]
:opt-un [:internal.color/value
:internal.color/color
:internal.color/opacity
:internal.color/gradient]))
(s/def ::recent-color
(s/keys :opt-un [:internal.color/value
:internal.color/color

18
frontend/resources/locales.json
View file

@ -2271,6 +2271,24 @@
},
"unused" : true
},
"workspace.options.blur-options.background-blur" : {
"used-in" : [ "src/app/main/ui/workspace/sidebar/options/blur.cljs:78" ],
"translations" : {
"en" : "Background"
}
},
"workspace.options.blur-options.layer-blur" : {
"used-in" : [ "src/app/main/ui/workspace/sidebar/options/blur.cljs:77" ],
"translations" : {
"en" : "Layer"
}
},
"workspace.options.blur-options.title" : {
"used-in" : [ "src/app/main/ui/workspace/sidebar/options/blur.cljs:107" ],
"translations" : {
"en" : "Blur"
}
},
"workspace.options.canvas-background" : {
"used-in" : [ "src/app/main/ui/workspace/sidebar/options/page.cljs:45" ],
"translations" : {

11
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

@ -163,6 +163,17 @@
}
}
.element-set-title-actions {
display: flex;
flex-direction: row;
flex: 1;
justify-content: flex-end;
.add-page {
margin: 0;
}
}
.collapse-pages {
margin-left: $small;

162
frontend/src/app/main/ui/shapes/filters.cljs
View file

@ -12,6 +12,7 @@
[rumext.alpha :as mf]
[cuerdas.core :as str]
[app.util.color :as color]
[app.common.data :as d]
[app.common.math :as mth]
[app.common.uuid :as uuid]))
@ -21,7 +22,8 @@
(defn filter-str
[filter-id shape]
(when (seq (:shadow shape))
(when (or (seq (->> (:shadow shape) (remove :hidden)))
(and (:blur shape) (-> shape :blur :hidden not)))
(str/fmt "url(#$0)" [filter-id])))
(mf/defc color-matrix
@ -34,10 +36,9 @@
:values (str/fmt "0 0 0 0 $0 0 0 0 0 $1 0 0 0 0 $2 0 0 0 $3 0" [r g b a])}]))
(mf/defc drop-shadow-filter
[{:keys [filter-id filter shape]}]
[{:keys [filter-in filter-id params]}]
(let [{:keys [x y width height]} (:selrect shape)
{:keys [id in-filter color offset-x offset-y blur spread]} filter]
(let [{:keys [color offset-x offset-y blur spread]} params]
[:*
[:feColorMatrix {:in "SourceAlpha" :type "matrix"
:values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}]
@ -45,21 +46,20 @@
[:feMorphology {:radius spread
:operator "dilate"
:in "SourceAlpha"
:result (str "filter" id)}])
:result filter-id}])
[:feOffset {:dx offset-x :dy offset-y}]
[:feGaussianBlur {:stdDeviation (/ blur 2)}]
[:& color-matrix {:color color}]
[:feBlend {:mode "normal"
:in2 in-filter
:result (str "filter" id)}]]))
:in2 filter-in
:result filter-id}]]))
(mf/defc inner-shadow-filter
[{:keys [filter-id filter shape]}]
[{:keys [filter-in filter-id params]}]
(let [{:keys [x y width height]} (:selrect shape)
{:keys [id in-filter color offset-x offset-y blur spread]} filter]
(let [{:keys [color offset-x offset-y blur spread]} params]
[:*
[:feColorMatrix {:in "SourceAlpha" :type "matrix"
:values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
@ -69,7 +69,7 @@
[:feMorphology {:radius spread
:operator "erode"
:in "SourceAlpha"
:result (str "filter" id)}])
:result filter-id}])
[:feOffset {:dx offset-x :dy offset-y}]
[:feGaussianBlur {:stdDeviation (/ blur 2)}]
@ -82,12 +82,36 @@
[:& color-matrix {:color color}]
[:feBlend {:mode "normal"
:in2 in-filter
:result (str "filter" id)}]]))
:in2 filter-in
:result filter-id}]]))
(defn filter-bounds [shape filter]
(mf/defc background-blur-filter
[{:keys [filter-id filter-in params]}]
[:*
[:feGaussianBlur {:in "BackgroundImage"
:stdDeviation (/ (:value params) 2)}]
[:feComposite {:in2 "SourceAlpha"
:operator "in"
:result filter-id}]])
(mf/defc layer-blur-filter
[{:keys [filter-id params]}]
[:feGaussianBlur {:stdDeviation (/ (:value params) 2)
:result filter-id}])
(mf/defc image-fix-filter [{:keys [filter-id]}]
[:feFlood {:flood-opacity 0 :result filter-id}])
(mf/defc blend-filters [{:keys [filter-id filter-in]}]
[:feBlend {:mode "normal"
:in "SourceGraphic"
:in2 filter-in
:result filter-id}])
(defn filter-bounds [shape filter-entry]
(let [{:keys [x y width height]} (:selrect shape)
{:keys [offset-x offset-y blur spread] :or {offset-x 0 offset-y 0 blur 0 spread 0}} filter
{:keys [offset-x offset-y blur spread] :or {offset-x 0 offset-y 0 blur 0 spread 0}} (:params filter-entry)
filter-x (min x (+ x offset-x (- spread) (- blur) -5))
filter-y (min y (+ y offset-y (- spread) (- blur) -5))
filter-width (+ width (mth/abs offset-x) (* spread 2) (* blur 2) 10)
@ -98,67 +122,83 @@
:y2 (+ filter-y filter-height)}))
(defn get-filters-bounds
[shape filters]
[shape filters blur-value]
(let [filter-bounds (->>
filters
(filter #(= :drop-shadow (:style %)))
(map (partial filter-bounds shape) ))
(let [filter-bounds (->> filters
(filter #(= :drop-shadow (:type %)))
(map (partial filter-bounds shape) ))
;; We add the selrect so the minimum size will be the selrect
filter-bounds (conj filter-bounds (:selrect shape))
x1 (apply min (map :x1 filter-bounds))
y1 (apply min (map :y1 filter-bounds))
x2 (apply max (map :x2 filter-bounds))
y2 (apply max (map :y2 filter-bounds))]
y2 (apply max (map :y2 filter-bounds))
x1 (- x1 (* blur-value 2))
x2 (+ x2 (* blur-value 2))
y1 (- y1 (* blur-value 2))
y2 (+ y2 (* blur-value 2))]
[x1 y1 (- x2 x1) (- y2 y1)]))
(defn blur-filters [type value]
(->> [value]
(remove :hidden)
(filter #(= (:type %) type))
(map #(hash-map :id (str "filter_" (:id %))
:type (:type %)
:params %))))
(defn shadow-filters [type filters]
(->> filters
(remove :hidden)
(filter #(= (:style %) type))
(map #(hash-map :id (str "filter_" (:id %))
:type (:style %)
:params %))))
(mf/defc filter-entry [{:keys [entry]}]
(let [props #js {:filter-id (:id entry)
:filter-in (:filter-in entry)
:params (:params entry)}]
(case (:type entry)
:drop-shadow [:> drop-shadow-filter props]
:inner-shadow [:> inner-shadow-filter props]
:background-blur [:> background-blur-filter props]
:layer-blur [:> layer-blur-filter props]
:image-fix [:> image-fix-filter props]
:blend-filters [:> blend-filters props])))
(mf/defc filters
[{:keys [filter-id shape]}]
(let [add-in-filter
(fn [filter in-filter]
(assoc filter :in-filter in-filter))
(let [filters (d/concat
[]
[{:id "BackgroundImageFix" :type :image-fix}]
filters (->> shape :shadow (filter (comp not :hidden)))
;; Background blur won't work in current SVG specification
;; We can revisit this in the future
#_(->> shape :blur (blur-filters :background-blur))
[filter-x filter-y filter-width filter-height] (get-filters-bounds shape filters)]
(when (seq filters)
[:filter {:id filter-id
:x filter-x :y filter-y
:width filter-width :height filter-height
:filterUnits "userSpaceOnUse"
:color-interpolation-filters "sRGB"}
(->> shape :shadow (shadow-filters :drop-shadow))
[{:id "shape" :type :blend-filters}]
(->> shape :shadow (shadow-filters :inner-shadow))
(->> shape :blur (blur-filters :layer-blur)))
(let [;; Add as a paramter the input filter
drop-shadow-filters (->> filters (filter #(= :drop-shadow (:style %))))
drop-shadow-filters (->> drop-shadow-filters
(map #(str "filter" (:id %)))
(cons "BackgroundImageFix")
(map add-in-filter drop-shadow-filters))
;; Adds the previous filter as `filter-in` parameter
filters (map #(assoc %1 :filter-in %2) filters (cons nil (map :id filters)))
inner-shadow-filters (->> filters (filter #(= :inner-shadow (:style %))))
inner-shadow-filters (->> inner-shadow-filters
(map #(str "filter" (:id %)))
(cons "shape")
(map add-in-filter inner-shadow-filters))]
[filter-x filter-y filter-width filter-height] (get-filters-bounds shape filters (or (-> shape :blur :value) 0))]
[:*
[:feFlood {:flood-opacity 0 :result "BackgroundImageFix"}]
(for [{:keys [id type] :as filter} drop-shadow-filters]
[:& drop-shadow-filter {:key id
:filter-id filter-id
:filter filter
:shape shape}])
[:*
(when (> (count filters) 2)
[:filter {:id filter-id
:x filter-x
:y filter-y
:width filter-width
:height filter-height
:filterUnits "userSpaceOnUse"
:color-interpolation-filters "sRGB"}
[:feBlend {:mode "normal"
:in "SourceGraphic"
:in2 (if (seq drop-shadow-filters)
(str "filter" (:id (last drop-shadow-filters)))
"BackgroundImageFix")
:result "shape"}]
(for [entry filters]
[:& filter-entry {:entry entry}])])]))
(for [{:keys [id type] :as filter} inner-shadow-filters]
[:& inner-shadow-filter {:key id
:filter-id filter-id
:filter filter
:shape shape}])])])))

42
frontend/src/app/main/ui/shapes/shape.cljs
View file

@ -10,12 +10,35 @@
(ns app.main.ui.shapes.shape
(:require
[rumext.alpha :as mf]
[cuerdas.core :as str]
[app.util.object :as obj]
[app.common.uuid :as uuid]
[app.common.geom.shapes :as geom]
[app.main.ui.shapes.filters :as filters]
[app.main.ui.shapes.gradients :as grad]
[app.main.ui.context :as muc]))
(mf/defc background-blur [{:keys [shape]}]
(when-let [background-blur-filters (->> shape :blur (remove #(= (:type %) :layer-blur)) (remove :hidden))]
(for [filter background-blur-filters]
[:*
[:foreignObject {:key (str "blur_" (:id filter))
:pointerEvents "none"
:x (:x shape)
:y (:y shape)
:width (:width shape)
:height (:height shape)
:transform (geom/transform-matrix shape)}
[:style ""]
[:div.backround-blur
{:style {:width "100%"
:height "100%"
;; :backdrop-filter (str/format "blur(%spx)" (:value filter))
:filter (str/format "blur(4px")
}}]]])))
(mf/defc shape-container
{::mf/wrap-props false}
[props]
@ -28,12 +51,23 @@
(obj/clone)
(obj/without ["shape" "children"])
(obj/set! "className" "shape")
(obj/set! "filter" (filters/filter-str filter-id shape)))]
(obj/set! "data-type" (:type shape))
(obj/set! "filter" (filters/filter-str filter-id shape)))
;;group-props (if (seq (:blur shape))
;; (obj/set! group-props "clip-path" (str/fmt "url(#%s)" (str "blur_" render-id)))
;; group-props)
]
[:& (mf/provider muc/render-ctx) {:value render-id}
[:> :g group-props
[:defs
[:& filters/filters {:shape shape :filter-id filter-id}]
[:& grad/gradient {:shape shape :attr :fill-color-gradient}]
[:& grad/gradient {:shape shape :attr :stroke-color-gradient}]]
[:& filters/filters {:shape shape :filter-id filter-id}]
[:& grad/gradient {:shape shape :attr :fill-color-gradient}]
[:& grad/gradient {:shape shape :attr :stroke-color-gradient}]
#_(when (:blur shape)
[:clipPath {:id (str "blur_" render-id)}
children])]
[:& background-blur {:shape shape}]
children]]))

10
frontend/src/app/main/ui/workspace/shapes/group.cljs
View file

@ -16,6 +16,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.workspace.shapes.common :as common]
[app.main.ui.shapes.shape :refer [shape-container]]
[app.main.ui.shapes.group :as group]
[app.util.dom :as dom]
[app.main.streams :as ms]
@ -72,11 +73,10 @@
(dom/prevent-default event)
(st/emit! (dw/select-inside-group (:id shape) @ms/mouse-position))))]
[:g.shape
{:on-mouse-down on-mouse-down
:on-context-menu on-context-menu
:on-double-click on-double-click}
[:> shape-container {:shape shape
:on-mouse-down on-mouse-down
:on-context-menu on-context-menu
:on-double-click on-double-click}
[:& group-shape
{:frame frame
:shape shape

70
frontend/src/app/main/ui/workspace/sidebar/options/blur.cljs Normal file
View file

@ -0,0 +1,70 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns app.main.ui.workspace.sidebar.options.blur
(:require
[rumext.alpha :as mf]
[app.common.data :as d]
[app.common.uuid :as uuid]
[app.main.data.workspace.common :as dwc]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]]))
(defn create-blur []
(let [id (uuid/next)]
{:id id
:type :layer-blur
:value 4
:hidden false}))
(mf/defc blur-menu [{:keys [ids values]}]
(let [locale (i18n/use-locale)
blur (:blur values)
has-value? (not (nil? blur))
change! (fn [update-fn] (st/emit! (dwc/update-shapes ids update-fn)))
handle-add
(fn []
(change! #(assoc % :blur (create-blur))))
handle-delete
(fn []
(change! #(dissoc % :blur)))
handle-change
(fn [value]
(change! #(assoc-in % [:blur :value] value)))
handle-toggle-visibility
(fn []
(change! #(update-in % [:blur :hidden] not)))]
[:div.element-set
[:div.element-set-title
[:span (t locale "workspace.options.blur-options.title")]
[:div.element-set-title-actions
(if has-value?
[:div.add-page {:on-click handle-toggle-visibility} (if (:hidden blur) i/eye-closed i/eye)])
(if has-value?
[:div.add-page {:on-click handle-delete} i/minus]
[:div.add-page {:on-click handle-add} i/close])]]
(when has-value?
[:div.element-set-content
[:& input-row {:label "Value"
:class "pixels"
:min 0
:value (:value blur)
:on-change handle-change}]])]))

8
frontend/src/app/main/ui/workspace/sidebar/options/circle.cljs
View file

@ -13,7 +13,8 @@
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]))
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
(mf/defc options
[{:keys [shape] :as props}]
@ -33,5 +34,6 @@
:type type
:values stroke-values}]
[:& shadow-menu {:ids ids
:type type
:values (select-keys shape [:shadow])}]]))
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]]))

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

@ -63,7 +63,7 @@
(mf/deps ids)
(fn [event]
(st/emit! (dc/change-fill ids {:color cp/default-color
:opacity 1}))))
:opacity 1}))))
on-delete
(mf/use-callback

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

@ -23,7 +23,8 @@
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]))
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
(declare +size-presets+)
@ -204,16 +205,17 @@
(let [ids [(:id shape)]
type (:type shape)
stroke-values (select-keys shape stroke-attrs)]
[:*
[:& measures-menu {:shape shape}]
[:& fill-menu {:ids ids
:type type
:values (select-keys shape fill-attrs)}]
[:& stroke-menu {:ids ids
[:*
[:& measures-menu {:shape shape}]
[:& fill-menu {:ids ids
:type type
:values stroke-values}]
[:& shadow-menu {:ids ids
:type type
:values (select-keys shape [:shadow])}]
[:& frame-grid {:shape shape}]]))
:values (select-keys shape fill-attrs)}]
[:& stroke-menu {:ids ids
:type type
:values stroke-values}]
[:& shadow-menu {:ids ids
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]
[:& frame-grid {:shape shape}]]))

5
frontend/src/app/main/ui/workspace/sidebar/options/group.cljs
View file

@ -18,6 +18,7 @@
[app.main.ui.workspace.sidebar.options.multiple :refer [get-shape-attrs]]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.text :refer [text-fill-attrs
text-font-attrs
@ -138,6 +139,10 @@
[:& fill-menu {:ids ids-with-children
:type type
:values fill-values}]
[:& blur-menu {:ids [id]
:values (select-keys shape [:blur])}]
(when-not (empty? other-ids)
[:& stroke-menu {:ids other-ids
:type type

11
frontend/src/app/main/ui/workspace/sidebar/options/image.cljs
View file

@ -10,7 +10,9 @@
(ns app.main.ui.workspace.sidebar.options.image
(:require
[rumext.alpha :as mf]
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]))
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
(mf/defc options
[{:keys [shape] :as props}]
@ -20,4 +22,9 @@
[:*
[:& measures-menu {:ids ids
:type type
:values measure-values}]]))
:values measure-values}]
[:& shadow-menu {:ids ids
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]]))

8
frontend/src/app/main/ui/workspace/sidebar/options/path.cljs
View file

@ -13,7 +13,8 @@
[app.common.data :as d]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]))
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
(mf/defc options
[{:keys [shape] :as props}]
@ -28,5 +29,6 @@
:type type
:values stroke-values}]
[:& shadow-menu {:ids ids
:type type
:values (select-keys shape [:shadow])}]]))
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]]))

12
frontend/src/app/main/ui/workspace/sidebar/options/rect.cljs
View file

@ -13,7 +13,8 @@
[app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]))
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]))
(mf/defc options
{::mf/wrap [mf/memo]}
@ -30,10 +31,13 @@
[:& fill-menu {:ids ids
:type type
:values fill-values}]
[:& stroke-menu {:ids ids
:type type
:values stroke-values}]
[:& shadow-menu {:ids ids
:type type
:values (select-keys shape [:shadow])}]]))
[:& shadow-menu {:ids ids
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]]))

6
frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs
View file

@ -16,7 +16,6 @@
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]]))
@ -25,8 +24,7 @@
(let [id (uuid/next)]
{:id id
:style :drop-shadow
:color "#000000"
:opacity 0.2
:color {:color "#000000" :opacity 0.2}
:offset-x 4
:offset-y 4
:blur 4
@ -183,7 +181,7 @@
:on-open #(st/emit! dwc/start-undo-transaction)
:on-close #(st/emit! dwc/commit-undo-transaction)}]]]]))
(mf/defc shadow-menu
[{:keys [ids type values] :as props}]
[{:keys [ids values] :as props}]
(let [locale (i18n/use-locale)
on-add-shadow

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

@ -25,6 +25,7 @@
[app.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
[app.main.ui.workspace.sidebar.options.shadow :refer [shadow-menu]]
[app.main.ui.workspace.sidebar.options.typography :refer [typography-entry typography-options]]
[app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
[app.util.dom :as dom]
[app.main.fonts :as fonts]
[app.util.i18n :as i18n :refer [tr t]]
@ -318,8 +319,9 @@
:values fill-values
:editor editor}]
[:& shadow-menu {:ids ids
:type type
:values (select-keys shape [:shadow])}]
[:& blur-menu {:ids ids
:values (select-keys shape [:blur])}]
[:& text-menu {:ids ids
:type type
:values text-values