Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues Activity

✨ Allow removing background from frames

Browse source
This commit is contained in:
alonso.torres 2021-06-22 12:16:59 +02:00 • committed by Andrés Moya
parent 150427cd39
commit 98f072619f
3 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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

6
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -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}]

19
frontend/src/app/main/ui/workspace/viewport/thumbnail_renderer.cljs
View file

@ -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}])))