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

🎉 Add border radius support to image shapes

Browse source
This commit is contained in:
Alejandro Alonso 2022-01-28 13:39:17 +01:00 • committed by Andrey Antukh
parent 38b7474f0b
commit fc2a26f249
11 changed files with 67 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -214,3 +214,8 @@
(add-fill shape render-id))]
(-> (obj/new)
(obj/set! "style" fill-styles))))
(defn extract-border-radius-attrs
[shape]
(-> (obj/new)
(add-border-radius shape)))

12
frontend/src/app/main/ui/shapes/export.cljs
View file

@ -64,6 +64,7 @@
(let [add! (add-factory shape)
group? (= :group (:type shape))
rect? (= :rect (:type shape))
image? (= :image (:type shape))
text? (= :text (:type shape))
path? (= :path (:type shape))
mask? (and group? (:masked-group? shape))
@ -92,12 +93,21 @@
(add! :constraints-v)
(add! :fixed-scroll)
(cond-> (and rect? (some? (:r1 shape)))
(cond-> (and (or rect? image?) (some? (:r1 shape)))
(-> (add! :r1)
(add! :r2)
(add! :r3)
(add! :r4)))
(cond-> (and image? (some? (:rx shape)))
(-> (add! :rx)
(add! :ry)))
(cond-> image?
(-> (add! :fill-color)
(add! :fill-opacity)
(add! :fill-color-gradient)))
(cond-> path?
(-> (add! :stroke-cap-start)
(add! :stroke-cap-end)))

8
frontend/src/app/main/ui/shapes/image.cljs
View file

@ -34,12 +34,14 @@
fill-image-id (str "fill-image-" render-id)
shape (assoc shape :fill-image fill-image-id)
props (-> (attrs/extract-style-attrs shape)
(obj/merge! (attrs/extract-border-radius-attrs shape))
(obj/merge!
#js {:x x
:y y
:transform transform
:width width
:height height}))]
:height height}))
path? (some? (.-d props))]
[:g
[:defs
@ -56,4 +58,6 @@
:width width
:height height}]]]]
[:& shape-custom-stroke {:shape shape}
[:> :rect props]]]))
(if path?
[:> :path props]
[:> :rect props])]]))

2
frontend/src/app/main/ui/viewer/handoff/attributes.cljs
View file

@ -26,7 +26,7 @@
:rect [:layout :fill :stroke :shadow :blur :svg]
:circle [:layout :fill :stroke :shadow :blur :svg]
:path [:layout :fill :stroke :shadow :blur :svg]
:image [:image :layout :shadow :blur :svg]
:image [:image :layout :fill :stroke :shadow :blur :svg]
:text [:layout :text :shadow :blur]})
(mf/defc attributes

2
frontend/src/app/main/ui/viewer/handoff/attributes/fill.cljs
View file

@ -24,7 +24,7 @@
(defn has-color? [shape]
(and
(not (contains? #{:image :text :group} (:type shape)))
(not (contains? #{:text :group} (:type shape)))
(or (:fill-color shape)
(:fill-color-gradient shape))))

2
frontend/src/app/main/ui/viewer/handoff/attributes/shadow.cljs
View file

@ -60,7 +60,7 @@
(mf/defc shadow-panel [{:keys [shapes]}]
(let [shapes (->> shapes (filter has-shadow?))]
(when (seq shapes)
(when (and (seq shapes) (> (count shapes) 0))
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.shadow")]

21
frontend/src/app/util/import/parser.cljs
View file

@ -364,7 +364,11 @@
(let [fill (:fill svg-data)
hide-fill-on-export (get-meta node :hide-fill-on-export str->bool)
gradient (when (str/starts-with? fill "url")
(parse-gradient node fill))]
(parse-gradient node fill))
meta-fill-color (get-meta node :fill-color)
meta-fill-opacity (get-meta node :fill-opacity)
meta-fill-color-gradient (get-meta node :fill-color-gradient)]
(cond-> props
:always
(assoc :fill-color nil
@ -380,7 +384,16 @@
:fill-opacity (-> svg-data (:fill-opacity "1") d/parse-double))
(some? hide-fill-on-export)
(assoc :hide-fill-on-export hide-fill-on-export))))
(assoc :hide-fill-on-export hide-fill-on-export)
(some? meta-fill-color)
(assoc :fill-color meta-fill-color
:fill-opacity (d/parse-double meta-fill-opacity))
(some? meta-fill-color-gradient)
(assoc :fill-color-gradient meta-fill-color-gradient
:fill-color nil
:fill-opacity nil))))
(defn add-stroke
[props node svg-data]
@ -763,7 +776,9 @@
(add-rect-data node svg-data))
(cond-> (some? (get-in node [:attrs :penpot:media-id]))
(add-image-data type node))
(->
(add-rect-data node svg-data)
(add-image-data type node)))
(cond-> (= :text type)
(add-text-data node))