Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 08:09:14 -05:00
Code Issues Activity

🐛 Inner shadow with border not working properly

Browse source
This commit is contained in:
Alejandro Alonso 2022-03-17 10:33:11 +01:00 • committed by Alonso Torres
parent 4d2de63374
commit c073a66e7e
3 changed files with 64 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -26,6 +26,7 @@
### :bug: Bugs fixed
- Inner shadow with border not working properly [Taiga #2883](https://tree.taiga.io/project/penpot/issue/2883)
- Fix ellipsis in long page names [Taiga #2962](https://tree.taiga.io/project/penpot/issue/2962)
- Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852)
- Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838)

89
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.shapes.custom-stroke
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.main.ui.context :as muc]
[app.main.ui.shapes.attrs :as attrs]
@ -316,44 +317,51 @@
[:& stroke-defs {:shape shape :render-id render-id :index index}]]
child])))
(defn build-stroke-props [position shape child value render-id]
(defn build-fill-props [shape child render-id]
(let [url-fill? (or (some? (:fill-image shape))
(= :image (:type shape))
(> (count (:fills shape)) 1)
(some :fill-color-gradient (:fills shape)))
one-fill? (= (count (:fills shape)) 1)
last-stroke? (= position (- (count (:strokes shape)) 1))
props (-> (obj/get child "props")
(obj/clone))
props (cond
(and last-stroke? url-fill?)
(obj/set! props "fill" (str "url(#fill-0-" render-id ")"))
props (cond-> props
(d/not-empty? (:shadow shape))
(obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))]
(and last-stroke? one-fill?)
(let [fill-props
(attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0)
style (-> (obj/get props "style")
(cond
url-fill?
(let [props (obj/set! props
"style"
(-> (obj/get props "style")
(obj/clone)
(obj/merge! (obj/get fill-props "style")))]
(cond-> (obj/merge! props fill-props)
(some? style)
(obj/set! "style" style)))
(obj/without ["fill" "fillOpacity"])))]
(obj/set! props "fill" (dm/fmt "url(#fill-0-%)" render-id)))
:else
(-> props
(obj/without ["fill" "fillOpacity"])
(obj/set!
"style"
(-> (obj/get props "style")
(obj/set! "fill" "none")
(obj/set! "fillOpacity" "none")))))
(d/not-empty? (:fills shape))
(let [fill-props
(attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0)
props (-> props
(add-style (obj/get (attrs/extract-stroke-attrs value position render-id) "style")))]
props))
style (-> (obj/get props "style")
(obj/clone)
(obj/merge! (obj/get fill-props "style")))]
(cond-> (obj/merge! props fill-props)
(some? style)
(obj/set! "style" style))))))
(defn build-stroke-props [position child value render-id]
(let [props (-> (obj/get child "props")
(obj/clone)
(obj/without ["fill" "fillOpacity"]))]
(-> props
(obj/set!
"style"
(-> (obj/get props "style")
(obj/set! "fill" "none")
(obj/set! "fillOpacity" "none")))
(add-style (obj/get (attrs/extract-stroke-attrs value position render-id) "style")))))
(mf/defc shape-custom-strokes
{::mf/wrap-props false}
@ -361,17 +369,22 @@
(let [child (obj/get props "children")
shape (obj/get props "shape")
elem-name (obj/get child "type")
render-id (mf/use-ctx muc/render-ctx)]
render-id (mf/use-ctx muc/render-ctx)
stroke-props (-> (obj/new)
(obj/set! "id" (dm/fmt "strokes-%" (:id shape)))
(cond->
(some? (:blur shape))
(obj/set! "filter" (dm/fmt "url(#filter_blur_%)" render-id))))]
(cond
[:*
[:g {:id (dm/fmt "fills-%" (:id shape))}
[:> elem-name (build-fill-props shape child render-id)]]
(when
(d/not-empty? (:strokes shape))
[:*
(for [[index value] (-> (d/enumerate (:strokes shape)) reverse)]
(let [props (build-stroke-props index shape child value render-id)
shape (assoc value :points (:points shape))]
[:& shape-custom-stroke {:shape shape :index index}
[:> elem-name props]]))]
:else
[:& shape-custom-stroke {:shape shape :index 0}
child])))
[:> :g stroke-props
(for [[index value] (-> (d/enumerate (:strokes shape)) reverse)]
(let [props (build-stroke-props index child value render-id)
shape (assoc value :points (:points shape))]
[:& shape-custom-stroke {:shape shape :index index}
[:> elem-name props]]))])]))

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

@ -7,6 +7,7 @@
(ns app.main.ui.shapes.shape
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.uuid :as uuid]
[app.main.ui.context :as muc]
[app.main.ui.shapes.attrs :as attrs]
@ -37,14 +38,21 @@
include-metadata? (mf/use-ctx ed/include-metadata-ctx)
shape-without-blur (dissoc shape :blur)
shape-without-shadows (assoc shape :shadow [])
wrapper-props
(-> (obj/clone props)
(obj/without ["shape" "children"])
(obj/set! "ref" ref)
(obj/set! "id" (str "shape-" (:id shape)))
(obj/set! "filter" (filters/filter-str filter-id shape))
(obj/set! "id" (dm/fmt "shape-%" (:id shape)))
(obj/set! "style" styles))
wrapper-props
(cond-> wrapper-props
(some #(= (:type shape) %) [:group :svg-raw])
(obj/set! "filter" (filters/filter-str filter-id shape)))
wrapper-props
(cond-> wrapper-props
(= :frame type)
@ -61,6 +69,8 @@
[:defs
[:& defs/svg-defs {:shape shape :render-id render-id}]
[:& filters/filters {:shape shape :filter-id filter-id}]
[:& filters/filters {:shape shape-without-blur :filter-id (dm/fmt "filter_shadow_%" render-id)}]
[:& filters/filters {:shape shape-without-shadows :filter-id (dm/fmt "filter_blur_%" render-id)}]
[:& fills/fills {:shape shape :render-id render-id}]
[:& frame/frame-clip-def {:shape shape :render-id render-id}]]
children]]))