mirror of
https://github.com/penpot/penpot.git
synced 2025-04-06 12:01:19 -05:00
🎉 Add stroke properties to image shape
This commit is contained in:
Alejandro Alonso
Andrey Antukh
parent
0f459ede50
commit
acc3d00fd5
6 changed files with 75 additions and 25 deletions
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
### :sparkles: New features
|
||||
|
||||
- Add stroke properties for image shapes [Taiga #497](https://tree.taiga.io/project/penpot/us/497)
|
||||
- On user settings, hide the theme selector as long as we only have one theme [Taiga #2610](https://tree.taiga.io/project/penpot/us/2610)
|
||||
- Automatically open comments from dashboard notifications [Taiga #2605](https://tree.taiga.io/project/penpot/us/2605)
|
||||
- Enhance the behaviour of the artboards list on view mode [Taiga #2634](https://tree.taiga.io/project/penpot/us/2634)
|
||||
|
|
|
|||
|
|
@ -81,6 +81,10 @@
|
|||
|
||||
(defn add-fill [attrs shape render-id]
|
||||
(let [fill-attrs (cond
|
||||
(contains? shape :fill-image)
|
||||
(let [fill-image-id (str "fill-image-" render-id)]
|
||||
{:fill (str/format "url(#%s)" fill-image-id)})
|
||||
|
||||
(contains? shape :fill-color-gradient)
|
||||
(let [fill-color-gradient-id (str "fill-color-gradient_" render-id)]
|
||||
{:fill (str/format "url(#%s)" fill-color-gradient-id)})
|
||||
|
|
@ -88,14 +92,10 @@
|
|||
(contains? shape :fill-color)
|
||||
{:fill (:fill-color shape)}
|
||||
|
||||
(contains? shape :fill-image)
|
||||
(let [fill-image-id (str "fill-image-" render-id)]
|
||||
{:fill (str/format "url(#%s)" fill-image-id) })
|
||||
|
||||
;; If contains svg-attrs the origin is svg. If it's not svg origin
|
||||
;; we setup the default fill as transparent (instead of black)
|
||||
(and (not (contains? shape :svg-attrs))
|
||||
(not (#{ :svg-raw :group } (:type shape))))
|
||||
(not (#{:svg-raw :group} (:type shape))))
|
||||
{:fill "none"}
|
||||
|
||||
:else
|
||||
|
|
@ -206,3 +206,11 @@
|
|||
[shape]
|
||||
(-> (obj/new)
|
||||
(add-style-attrs shape)))
|
||||
|
||||
(defn extract-fill-attrs
|
||||
[shape]
|
||||
(let [render-id (mf/use-ctx muc/render-ctx)
|
||||
fill-styles (-> (obj/get shape "style" (obj/new))
|
||||
(add-fill shape render-id))]
|
||||
(-> (obj/new)
|
||||
(obj/set! "style" fill-styles))))
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
(:require
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.config :as cfg]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.embed :as embed]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
|
@ -23,7 +24,11 @@
|
|||
fill-image-id (str "fill-image-" render-id)
|
||||
uri (cfg/resolve-file-media (:fill-image shape))
|
||||
embed (embed/use-data-uris [uri])
|
||||
transform (gsh/transform-matrix shape)]
|
||||
transform (gsh/transform-matrix shape)
|
||||
shape-without-image (dissoc shape :fill-image)
|
||||
fill-attrs (-> (attrs/extract-fill-attrs shape-without-image)
|
||||
(obj/set! "width" width)
|
||||
(obj/set! "height" height))]
|
||||
|
||||
[:pattern {:id fill-image-id
|
||||
:patternUnits "userSpaceOnUse"
|
||||
|
|
@ -33,6 +38,9 @@
|
|||
:width width
|
||||
:patternTransform transform
|
||||
:data-loading (str (not (contains? embed uri)))}
|
||||
[:image {:xlinkHref (get embed uri uri)
|
||||
:width width
|
||||
:height height}]]))))
|
||||
[:g
|
||||
[:> :rect fill-attrs]
|
||||
[:image {:xlinkHref (get embed uri uri)
|
||||
:width width
|
||||
:height height}]
|
||||
]]))))
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@
|
|||
|
||||
(ns app.main.ui.shapes.image
|
||||
(:require
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.config :as cfg]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
|
||||
[app.main.ui.shapes.embed :as embed]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -23,22 +24,36 @@
|
|||
uri (cfg/resolve-file-media metadata)
|
||||
embed (embed/use-data-uris [uri])
|
||||
|
||||
transform (geom/transform-matrix shape)
|
||||
transform (gsh/transform-matrix shape)
|
||||
|
||||
fill-attrs (-> (attrs/extract-fill-attrs shape)
|
||||
(obj/set! "width" width)
|
||||
(obj/set! "height" height))
|
||||
|
||||
render-id (mf/use-ctx muc/render-ctx)
|
||||
fill-image-id (str "fill-image-" render-id)
|
||||
shape (assoc shape :fill-image fill-image-id)
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:x x
|
||||
:y y
|
||||
:transform transform
|
||||
:width width
|
||||
:height height
|
||||
:preserveAspectRatio "none"
|
||||
:data-loading (str (not (contains? embed uri)))}))
|
||||
:height height}))]
|
||||
|
||||
on-drag-start (fn [event]
|
||||
;; Prevent browser dragging of the image
|
||||
(dom/prevent-default event))]
|
||||
|
||||
[:> "image" (obj/merge!
|
||||
props
|
||||
#js {:xlinkHref (get embed uri uri)
|
||||
:onDragStart on-drag-start})]))
|
||||
[:g
|
||||
[:defs
|
||||
[:pattern {:id fill-image-id
|
||||
:patternUnits "userSpaceOnUse"
|
||||
:x x
|
||||
:y y
|
||||
:height height
|
||||
:width width
|
||||
:data-loading (str (not (contains? embed uri)))}
|
||||
[:g
|
||||
[:> :rect fill-attrs]
|
||||
[:image {:xlinkHref (get embed uri uri)
|
||||
:width width
|
||||
:height height}]]]]
|
||||
[:& shape-custom-stroke {:shape shape}
|
||||
[:> :rect props]]]))
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.shapes.path
|
||||
(:require
|
||||
[app.common.logging :as log]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
|
||||
[app.util.object :as obj]
|
||||
|
|
@ -18,7 +19,10 @@
|
|||
(mf/defc path-shape
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
(let [shape (-> (unchecked-get props "shape")
|
||||
(dissoc :fill-color)
|
||||
(dissoc :fill-opacity)
|
||||
(dissoc :fill-image))
|
||||
content (:content shape)
|
||||
pdata (mf/with-memo [content]
|
||||
(try
|
||||
|
|
@ -30,6 +34,8 @@
|
|||
:cause e)
|
||||
"")))
|
||||
|
||||
render-id (mf/use-ctx muc/render-ctx)
|
||||
shape (assoc shape :fill-image (str "fill-image-" render-id))
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/set! "d" pdata))]
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@
|
|||
(:require
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc options
|
||||
|
|
@ -19,7 +21,9 @@
|
|||
type (:type shape)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)]
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
fill-values (select-keys shape fill-attrs)
|
||||
stroke-values (select-keys shape stroke-attrs)]
|
||||
[:*
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
|
|
@ -32,6 +36,14 @@
|
|||
:type type
|
||||
:values layer-values}]
|
||||
|
||||
[:& fill-menu {:ids ids
|
||||
:type type
|
||||
:values fill-values}]
|
||||
|
||||
[:& stroke-menu {:ids ids
|
||||
:type type
|
||||
:values stroke-values}]
|
||||
|
||||
[:& shadow-menu {:ids ids
|
||||
:values (select-keys shape [:shadow])}]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue