mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
✨ Allow removing background from frames
This commit is contained in:
parent
150427cd39
commit
98f072619f
3 changed files with 26 additions and 11 deletions
|
@ -10,8 +10,6 @@
|
|||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def frame-default-props {:fill-color "#ffffff"})
|
||||
|
||||
(defn frame-shape
|
||||
[shape-wrapper]
|
||||
(mf/fnc frame-shape
|
||||
|
@ -21,8 +19,11 @@
|
|||
shape (unchecked-get props "shape")
|
||||
{:keys [width height]} shape
|
||||
|
||||
props (-> (merge frame-default-props shape)
|
||||
(attrs/extract-style-attrs)
|
||||
has-background? (or (some? (:fill-color shape))
|
||||
(some? (:fill-color-gradient shape)))
|
||||
has-stroke? (not= :none (:stroke-style shape))
|
||||
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:x 0
|
||||
:y 0
|
||||
|
@ -30,7 +31,8 @@
|
|||
:height height
|
||||
:className "frame-background"}))]
|
||||
[:*
|
||||
[:> :rect props]
|
||||
(when (or has-background? has-stroke?)
|
||||
[:> :rect props])
|
||||
(for [item childs]
|
||||
[:& shape-wrapper {:frame shape
|
||||
:shape item
|
||||
|
|
|
@ -65,6 +65,7 @@
|
|||
objects (mf/use-memo
|
||||
(mf/deps objects object-modifiers)
|
||||
#(cp/merge-modifiers objects object-modifiers))
|
||||
background (get options :background "#E8E9EA")
|
||||
|
||||
;; STATE
|
||||
alt? (mf/use-state false)
|
||||
|
@ -157,7 +158,8 @@
|
|||
|
||||
[:div.viewport
|
||||
[:div.viewport-overlays
|
||||
[:& wtr/frame-renderer {:objects objects}]
|
||||
[:& wtr/frame-renderer {:objects objects
|
||||
:background background}]
|
||||
|
||||
(when show-comments?
|
||||
[:& comments/comments-layer {:vbox vbox
|
||||
|
@ -185,7 +187,7 @@
|
|||
:width (:width vport 0)
|
||||
:height (:height vport 0)
|
||||
:view-box (utils/format-viewbox vbox)
|
||||
:style {:background-color (get options :background "#E8E9EA")
|
||||
:style {:background-color background
|
||||
:pointer-events "none"}}
|
||||
|
||||
[:& use/export-page {:options options}]
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
(mf/defc frame-thumbnail
|
||||
"Renders the canvas and image for a frame thumbnail and stores its value into the shape"
|
||||
[{:keys [shape on-thumbnail-data on-frame-not-found]}]
|
||||
[{:keys [shape background on-thumbnail-data on-frame-not-found]}]
|
||||
|
||||
(let [thumbnail-img (mf/use-ref nil)
|
||||
thumbnail-canvas (mf/use-ref nil)
|
||||
|
@ -45,12 +45,21 @@
|
|||
|
||||
on-image-load
|
||||
(mf/use-callback
|
||||
(mf/deps on-thumbnail-data)
|
||||
(mf/deps on-thumbnail-data background)
|
||||
(fn []
|
||||
(let [canvas-node (mf/ref-val thumbnail-canvas)
|
||||
img-node (mf/ref-val thumbnail-img)
|
||||
(let [canvas-node (mf/ref-val thumbnail-canvas)
|
||||
img-node (mf/ref-val thumbnail-img)
|
||||
|
||||
canvas-context (.getContext canvas-node "2d")
|
||||
canvas-width (.-width canvas-node)
|
||||
canvas-height (.-height canvas-node)
|
||||
|
||||
_ (.clearRect canvas-context 0 0 canvas-width canvas-height)
|
||||
_ (.rect canvas-context 0 0 canvas-width canvas-height)
|
||||
_ (set! (.-fillStyle canvas-context) background)
|
||||
_ (.fill canvas-context)
|
||||
_ (.drawImage canvas-context img-node 0 0)
|
||||
|
||||
data (.toDataURL canvas-node "image/jpeg" 0.8)]
|
||||
(on-thumbnail-data data))))]
|
||||
|
||||
|
@ -72,6 +81,7 @@
|
|||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [objects (obj/get props "objects")
|
||||
background (obj/get props "background")
|
||||
|
||||
;; Id of the current frame being rendered
|
||||
shape-id (mf/use-state nil)
|
||||
|
@ -131,5 +141,6 @@
|
|||
(when (and (some? @shape-id) (contains? objects @shape-id))
|
||||
[:& frame-thumbnail {:key (str "thumbnail-" @shape-id)
|
||||
:shape (get objects @shape-id)
|
||||
:background background
|
||||
:on-thumbnail-data on-thumbnail-data
|
||||
:on-frame-not-found on-frame-not-found}])))
|
||||
|
|
Loading…
Add table
Reference in a new issue