0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

Ability to add multiple fills to a shape

This commit is contained in:
Alejandro Alonso 2022-02-04 09:53:42 +01:00 committed by Alonso Torres
parent aecb8a1464
commit 23a9c74297
25 changed files with 475 additions and 243 deletions

View file

@ -15,6 +15,7 @@
### :sparkles: New features
- Ability to add multiple fills to a shape [Taiga #1394](https://tree.taiga.io/project/penpot/us/1394)
- Team members redesign [Taiga #2283](https://tree.taiga.io/project/penpot/us/2283)
- Rotation to snap to 15º intervals with shift [Taiga #2437](https://tree.taiga.io/project/penpot/issue/2437)
- Support border radius and stroke properties for images [Taiga #497](https://tree.taiga.io/project/penpot/us/497)

View file

@ -36,6 +36,7 @@
;; :rx nil
;; :ry nil}
;;
(defn get-attrs-multi
([objs attrs]
(get-attrs-multi objs attrs = identity))

View file

@ -9,12 +9,13 @@
[app.common.colors :as clr]
[app.common.uuid :as uuid]))
(def file-version 13)
(def file-version 14)
(def default-color clr/gray-20)
(def root uuid/zero)
(def component-sync-attrs
{:name :name-group
:fills :fill-group
:fill-color :fill-group
:fill-opacity :fill-group
:fill-color-gradient :fill-group

View file

@ -33,16 +33,16 @@
(def default-frame-attrs
{:frame-id uuid/zero
:fill-color clr/white
:fill-opacity 1
:fills [{:fill-color clr/white
:fill-opacity 1}]
:shapes []
:hide-fill-on-export false})
(def ^:private minimal-shapes
[{:type :rect
:name "Rect-1"
:fill-color default-color
:fill-opacity 1
:fills [{:fill-color default-color
:fill-opacity 1}]
:stroke-style :none
:stroke-alignment :center
:stroke-width 0
@ -53,12 +53,13 @@
{:type :image
:rx 0
:ry 0}
:ry 0
:fills []}
{:type :circle
:name "Circle-1"
:fill-color default-color
:fill-opacity 1
:fills [{:fill-color default-color
:fill-opacity 1}]
:stroke-style :none
:stroke-alignment :center
:stroke-width 0
@ -67,6 +68,7 @@
{:type :path
:name "Path-1"
:fills []
:stroke-style :solid
:stroke-alignment :center
:stroke-width 2
@ -75,8 +77,8 @@
{:type :frame
:name "Artboard-1"
:fill-color clr/white
:fill-opacity 1
:fills [{:fill-color clr/white
:fill-opacity 1}]
:stroke-style :none
:stroke-alignment :center
:stroke-width 0

View file

@ -300,3 +300,33 @@
(update page :objects #(d/mapm update-object %)))]
(update data :pages-index #(d/mapm update-page %))))
(defn set-fills
[shape]
(let [attrs {:fill-color (:fill-color shape)
:fill-color-gradient (:fill-color-gradient shape)
:fill-color-ref-file (:fill-color-ref-file shape)
:fill-color-ref-id (:fill-color-ref-id shape)
:fill-opacity (:fill-opacity shape)}
clean-attrs (d/without-nils attrs)]
(-> shape
(assoc :fills [clean-attrs])
(dissoc :fill-color)
(dissoc :fill-color-gradient)
(dissoc :fill-color-ref-file)
(dissoc :fill-color-ref-id)
(dissoc :fill-opacity))))
;; Add fills to shapes
(defmethod migrate 14
[data]
(letfn [(update-object [_ object]
(cond-> object
(and (not (= :text (:type object))) (nil? (:fills object)))
(set-fills)))
(update-page [_ page]
(update page :objects #(d/mapm update-object %)))]
(update data :pages-index #(d/mapm update-page %))))

View file

@ -499,6 +499,10 @@
margin-bottom: $size-2;
position: relative;
&[draggable="true"] {
cursor: pointer;
}
.color-name {
font-size: $fs12;
margin: 5px 6px 0px 6px;

View file

@ -954,6 +954,7 @@
justify-content: center;
align-items: center;
cursor: pointer;
svg {
width: 12px;
height: 12px;
@ -961,6 +962,11 @@
stroke: $color-gray-20;
}
&.remove {
min-width: 20px;
min-height: 20px;
}
&:hover svg,
&.active svg {
fill: $color-primary;

View file

@ -111,42 +111,105 @@
(assoc-in [:workspace-local :picked-color-select] value)
(assoc-in [:workspace-local :picked-shift?] shift?)))))
(defn transform-fill
[state ids color transform]
(let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id)
is-text? #(= :text (:type (get objects %)))
text-ids (filter is-text? ids)
shape-ids (filter (comp not is-text?) ids)
attrs (cond-> {:fill-color nil
:fill-color-gradient nil
:fill-color-ref-file nil
:fill-color-ref-id nil
:fill-opacity nil}
(contains? color :color)
(assoc :fill-color (:color color))
(contains? color :id)
(assoc :fill-color-ref-id (:id color))
(contains? color :file-id)
(assoc :fill-color-ref-file (:file-id color))
(contains? color :gradient)
(assoc :fill-color-gradient (:gradient color))
(contains? color :opacity)
(assoc :fill-opacity (:opacity color)))
;; Not nil attrs
clean-attrs (d/without-nils attrs)]
(rx/concat
(rx/from (map #(dwt/update-text-attrs {:id % :attrs attrs}) text-ids))
(rx/of (dch/update-shapes
shape-ids
#(transform % clean-attrs))))))
(defn swap-fills [shape index new-index]
(let [first (get-in shape [:fills index])
second (get-in shape [:fills new-index])]
(-> shape
(assoc-in [:fills index] second)
(assoc-in [:fills new-index] first))
))
(defn reorder-fills
[ids index new-index]
(ptk/reify ::reorder-fills
ptk/WatchEvent
(watch [_ _ _]
(rx/of (dch/update-shapes
ids
#(swap-fills % index new-index))))))
(defn change-fill
[ids color]
[ids color position]
(ptk/reify ::change-fill
ptk/WatchEvent
(watch [_ state _]
(let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id)
(let [change (fn [shape attrs] (assoc-in shape [:fills position] (into {} attrs)))]
(transform-fill state ids color change)))))
is-text? #(= :text (:type (get objects %)))
text-ids (filter is-text? ids)
shape-ids (filter (comp not is-text?) ids)
(defn change-fill-and-clear
[ids color]
(ptk/reify ::change-fill-and-clear
ptk/WatchEvent
(watch [_ state _]
(let [set (fn [shape attrs] (assoc shape :fills [attrs]))]
(transform-fill state ids color set)))))
attrs (cond-> {:fill-color nil
:fill-color-gradient nil
::fill-color-ref-file nil
:fill-color-ref-id nil
:fill-opacity nil}
(defn add-fill
[ids color]
(ptk/reify ::add-fill
ptk/WatchEvent
(watch [_ state _]
(let [add (fn [shape attrs] (assoc shape :fills (into [attrs] (:fills shape))))]
(transform-fill state ids color add)))))
(contains? color :color)
(assoc :fill-color (:color color))
(defn remove-fill
[ids color position]
(ptk/reify ::remove-fill
ptk/WatchEvent
(watch [_ state _]
(let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
(filterv (fn [[idx _]] (not= idx index)))
(mapv second)))
(contains? color :id)
(assoc :fill-color-ref-id (:id color))
remove (fn [shape _] (update shape :fills remove-fill-by-index position))]
(transform-fill state ids color remove)))))
(contains? color :file-id)
(assoc :fill-color-ref-file (:file-id color))
(defn remove-all-fills
[ids color]
(ptk/reify ::remove-all-fills
ptk/WatchEvent
(watch [_ state _]
(let [remove-all (fn [shape _] (assoc shape :fills []))]
(transform-fill state ids color remove-all)))))
(contains? color :gradient)
(assoc :fill-color-gradient (:gradient color))
(contains? color :opacity)
(assoc :fill-opacity (:opacity color)))]
(rx/concat
(rx/from (map #(dwt/update-text-attrs {:id % :attrs attrs}) text-ids))
(rx/of (dch/update-shapes shape-ids (fn [shape] (d/merge shape attrs)))))))))
(defn change-hide-fill-on-export
[ids hide-fill-on-export]
@ -207,7 +270,7 @@
update-events
(fn [color]
(rx/of (change-fill ids color)))]
(rx/of (change-fill ids color 0)))]
(rx/merge
;; Stream that updates the stroke/width and stops if `esc` pressed

View file

@ -73,26 +73,28 @@
(defn setup-fill [shape]
(cond-> shape
;; Color present as attribute
(uc/color? (get-in shape [:svg-attrs :fill]))
(uc/color? (str/trim (get-in shape [:svg-attrs :fill])))
(-> (update :svg-attrs dissoc :fill)
(assoc :fill-color (-> (get-in shape [:svg-attrs :fill])
(uc/parse-color))))
(assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :fill])
(str/trim)
(uc/parse-color))))
;; Color present as style
(uc/color? (get-in shape [:svg-attrs :style :fill]))
(uc/color? (str/trim (get-in shape [:svg-attrs :style :fill])))
(-> (update-in [:svg-attrs :style] dissoc :fill)
(assoc :fill-color (-> (get-in shape [:svg-attrs :style :fill])
(uc/parse-color))))
(assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :style :fill])
(str/trim)
(uc/parse-color))))
(get-in shape [:svg-attrs :fill-opacity])
(-> (update :svg-attrs dissoc :fill-opacity)
(assoc :fill-opacity (-> (get-in shape [:svg-attrs :fill-opacity])
(d/parse-double))))
(assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :fill-opacity])
(d/parse-double))))
(get-in shape [:svg-attrs :style :fill-opacity])
(-> (update-in [:svg-attrs :style] dissoc :fill-opacity)
(assoc :fill-opacity (-> (get-in shape [:svg-attrs :style :fill-opacity])
(d/parse-double))))))
(assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :style :fill-opacity])
(d/parse-double))))))
(defn setup-stroke [shape]
(let [stroke-linecap (-> (or (get-in shape [:svg-attrs :stroke-linecap])
@ -378,9 +380,10 @@
:polygon (create-path-shape name frame-id svg-data (-> element-data usvg/polygon->path))
:line (create-path-shape name frame-id svg-data (-> element-data usvg/line->path))
:image (create-image-shape name frame-id svg-data element-data)
#_other (create-raw-svg name frame-id svg-data element-data))
#_other (create-raw-svg name frame-id svg-data element-data)))
shape (assoc shape :fills [])
)
shape (when (some? shape)
(-> shape
(assoc :svg-defs (select-keys (:defs svg-data) references))

View file

@ -29,6 +29,7 @@
[props external-ref]
(let [value (obj/get props "value")
on-change (obj/get props "onChange")
on-blur (obj/get props "onBlur")
;; We need a ref pointing to the input dom element, but the user
;; of this component may provide one (that is forwarded here).
@ -92,6 +93,8 @@
(mf/deps parse-value apply-value update-input)
(fn [_]
(let [new-value (parse-value)]
(when on-blur
(on-blur))
(if new-value
(apply-value new-value)
(update-input value)))))

View file

@ -70,7 +70,7 @@
object (cond-> object
(:hide-fill-on-export object)
(assoc :fill-color nil :fill-opacity 0))
(assoc :fills []))
{:keys [x y width height] :as bs} (calc-bounds object objects)
[_ _ width height :as coords] (->> [x y width height] (map #(* % zoom)))

View file

@ -79,14 +79,15 @@
"z")}))
attrs))
(defn add-fill [attrs shape render-id]
(let [fill-attrs (cond
(defn add-fill [attrs shape render-id index]
(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)]
(let [fill-color-gradient-id (str "fill-color-gradient_" render-id "_" index)]
{:fill (str/format "url(#%s)" fill-color-gradient-id)})
(contains? shape :fill-color)
@ -193,9 +194,23 @@
styles (-> (obj/get props "style" (obj/new))
(obj/merge! svg-styles)
(add-fill shape render-id)
(add-stroke shape render-id)
(add-layer-props shape))]
(add-layer-props shape))
styles (cond (or (some? (:fill-image shape))
(= :image (:type shape))
(> (count (:fills shape)) 1)
(some #(some? (:fill-color-gradient %)) (:fills shape)))
(obj/set! styles "fill" (str "url(#fill-" render-id ")"))
;; imported svgs can have fill and fill-opacity attributes
(obj/contains? svg-styles "fill")
(-> styles
(obj/set! "fill" (obj/get svg-styles "fill"))
(obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity")))
:else
(add-fill styles (get-in shape [:fills 0]) render-id 0))]
(-> props
(obj/merge! svg-attrs)
@ -208,10 +223,10 @@
(add-style-attrs shape)))
(defn extract-fill-attrs
[shape]
[shape index]
(let [render-id (mf/use-ctx muc/render-ctx)
fill-styles (-> (obj/get shape "style" (obj/new))
(add-fill shape render-id))]
(add-fill shape render-id index))]
(-> (obj/new)
(obj/set! "style" fill-styles))))

View file

@ -103,11 +103,6 @@
(-> (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)))
@ -293,6 +288,7 @@
:penpot:background-overlay ((d/nilf str) (:background-overlay interaction))
:penpot:preserve-scroll ((d/nilf str) (:preserve-scroll interaction))}])])))
(mf/defc export-data
[{:keys [shape]}]
(let [props (-> (obj/new) (add-data shape) (add-library-refs shape))]

View file

@ -1,46 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.ui.shapes.fill-image
(: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]))
(mf/defc fill-image-pattern
{::mf/wrap-props false}
[props]
(let [shape (obj/get props "shape")
render-id (obj/get props "render-id")]
(when (contains? shape :fill-image)
(let [{:keys [x y width height]} (:selrect shape)
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)
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"
:x x
:y y
:height height
:width width
:patternTransform transform
:data-loading (str (not (contains? embed uri)))}
[:g
[:> :rect fill-attrs]
[:image {:xlinkHref (get embed uri uri)
:width width
:height height}]
]]))))

View file

@ -0,0 +1,64 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.ui.shapes.fills
(:require
[app.common.data :as d]
[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.main.ui.shapes.gradients :as grad]
[app.util.object :as obj]
[rumext.alpha :as mf]))
(mf/defc fills
{::mf/wrap-props false}
[props]
(let [shape (obj/get props "shape")
render-id (obj/get props "render-id")
{:keys [x y width height]} (:selrect shape)
{:keys [metadata]} shape
fill-id (str "fill-" render-id)
has-image (or metadata (:fill-image shape))
uri (if metadata
(cfg/resolve-file-media metadata)
(cfg/resolve-file-media (:fill-image shape)))
embed (embed/use-data-uris [uri])
transform (gsh/transform-matrix shape)
pattern-attrs (cond-> #js {:id fill-id
:patternUnits "userSpaceOnUse"
:x x
:y y
:height height
:width width
:data-loading (str (not (contains? embed uri)))}
(= :path (:type shape))
(obj/set! "patternTransform" transform))]
[:*
(for [[index value] (-> (d/enumerate (:fills shape [])) reverse)]
(cond (some? (:fill-color-gradient value))
(case (:type (:fill-color-gradient value))
:linear [:> grad/linear-gradient #js {:id (str (name :fill-color-gradient) "_" render-id "_" index)
:gradient (:fill-color-gradient value)
:shape shape}]
:radial [:> grad/radial-gradient #js {:id (str (name :fill-color-gradient) "_" render-id "_" index)
:gradient (:fill-color-gradient value)
:shape shape}])))
[:> :pattern pattern-attrs
[:g
(for [[index value] (-> (d/enumerate (:fills shape [])) reverse)]
[:> :rect (-> (attrs/extract-fill-attrs value index)
(obj/set! "width" width)
(obj/set! "height" height))])
(when has-image
[:image {:xlinkHref (get embed uri uri)
:width width
:height height}])]]]))

View file

@ -51,10 +51,6 @@
shape (unchecked-get props "shape")
{:keys [x y width height]} shape
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 x
@ -63,8 +59,8 @@
:height height
:className "frame-background"}))]
[:*
(when (or has-background? has-stroke?)
[:> :rect props])
[:> :rect props]
(for [item childs]
[:& shape-wrapper {:shape item
:key (:id item)}])])))

View file

@ -7,11 +7,8 @@
(ns app.main.ui.shapes.image
(:require
[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.object :as obj]
[rumext.alpha :as mf]))
@ -20,19 +17,8 @@
[props]
(let [shape (unchecked-get props "shape")
{:keys [x y width height metadata]} shape
uri (cfg/resolve-file-media metadata)
embed (embed/use-data-uris [uri])
{:keys [x y width height]} 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! (attrs/extract-border-radius-attrs shape))
(obj/merge!
@ -44,19 +30,6 @@
path? (some? (.-d props))]
[: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}
(if path?
[:> :path props]

View file

@ -13,8 +13,6 @@
[app.util.path.format :as upf]
[rumext.alpha :as mf]))
;; --- Path Shape
(mf/defc path-shape
{::mf/wrap-props false}
[props]

View file

@ -12,7 +12,7 @@
[app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.custom-stroke :as cs]
[app.main.ui.shapes.export :as ed]
[app.main.ui.shapes.fill-image :as fim]
[app.main.ui.shapes.fills :as fills]
[app.main.ui.shapes.filters :as filters]
[app.main.ui.shapes.frame :as frame]
[app.main.ui.shapes.gradients :as grad]
@ -63,9 +63,12 @@
[:defs
[:& defs/svg-defs {:shape shape :render-id render-id}]
[:& filters/filters {:shape shape :filter-id filter-id}]
[:& grad/gradient {:shape shape :attr :fill-color-gradient}]
[:& grad/gradient {:shape shape :attr :stroke-color-gradient}]
[:& fim/fill-image-pattern {:shape shape :render-id render-id}]
(when (or (some? (:fill-image shape))
(= :image (:type shape))
(> (count (:fills shape)) 1)
(some :fill-color-gradient (:fills shape)))
[:& fills/fills {:shape shape :render-id render-id}])
[:& cs/stroke-defs {:shape shape :render-id render-id}]
[:& frame/frame-clip-def {:shape shape :render-id render-id}]]
children]]))

View file

@ -26,7 +26,8 @@
(and
(not (contains? #{:text :group} (:type shape)))
(or (:fill-color shape)
(:fill-color-gradient shape))))
(:fill-color-gradient shape)
(seq (:fills shape)))))
(defn copy-data [shape]
(cg/generate-css-props
@ -55,5 +56,9 @@
[:& copy-button {:data (copy-data (first shapes))}])]
(for [shape shapes]
[:& fill-block {:key (str "fill-block-" (:id shape))
:shape shape}])])))
(if (seq (:fills shape))
(for [value (:fills shape [])]
[:& fill-block {:key (str "fill-block-" (:id shape))
:shape value}])
[:& fill-block {:key (str "fill-block-" (:id shape))
:shape shape}]))])))

View file

@ -46,7 +46,7 @@
(fn [event]
(if (kbd/alt? event)
(st/emit! (mdc/change-stroke ids-with-children (merge uc/empty-color color)))
(st/emit! (mdc/change-fill ids-with-children (merge uc/empty-color color)))))]
(st/emit! (mdc/change-fill ids-with-children (merge uc/empty-color color) 0))))]
[:div.color-cell {:on-click select-color}
[:& cb/color-bullet {:color color}]

View file

@ -799,7 +799,7 @@
(let [ids (wsh/lookup-selected @st/state)]
(if (kbd/alt? event)
(st/emit! (dc/change-stroke ids color))
(st/emit! (dc/change-fill ids color)))))
(st/emit! (dc/change-fill ids color 0)))))
rename-color
(fn [name]

View file

@ -6,18 +6,23 @@
(ns app.main.ui.workspace.sidebar.options.menus.fill
(:require
[app.common.attrs :as attrs]
[app.common.colors :as clr]
[app.common.data :as d]
[app.common.pages :as cp]
[app.main.data.workspace.colors :as dc]
[app.main.store :as st]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.color :as uc]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
(def fill-attrs
[:fill-color
[:fills
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
@ -27,24 +32,60 @@
(def fill-attrs-shape
(conj fill-attrs :hide-fill-on-export))
(defn color-values
[color]
{:color (:fill-color color)
:opacity (:fill-opacity color)
:id (:fill-color-ref-id color)
:file-id (:fill-color-ref-file color)
:gradient (:fill-color-gradient color)})
(mf/defc fill-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]}
[{:keys [ids type values disable-remove?] :as props}]
(let [show? (or (not (nil? (:fill-color values)))
(not (nil? (:fill-color-gradient values))))
label (case type
(let [label (case type
:multiple (tr "workspace.options.selection-fill")
:group (tr "workspace.options.group-fill")
(tr "workspace.options.fill"))
color {:color (:fill-color values)
:opacity (:fill-opacity values)
:id (:fill-color-ref-id values)
:file-id (:fill-color-ref-file values)
:gradient (:fill-color-gradient values)}
;; Excluding nil values
values (d/without-nils values)
hide-fill-on-export? (:hide-fill-on-export values)
only-shapes? (and (contains? values :fills)
;; texts have :fill-* attributes, the rest of the shapes have :fills
(= (count (filter #(str/starts-with? (d/name %) "fill-") (keys values))) 0))
shapes-and-texts? (and (contains? values :fills)
;; texts have :fill-* attributes, the rest of the shapes have :fills
(> (count (filter #(str/starts-with? (d/name %) "fill-") (keys values))) 0))
;; Texts still have :fill-* attributes and the rest of the shapes just :fills so we need some extra calculation when multiple selection happens to detect them
plain-values (if (vector? (:fills values))
(concat (:fills values) [(dissoc values :fills)])
values)
plain-values (attrs/get-attrs-multi plain-values [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file :fill-color-gradient])
plain-values (if (empty? plain-values)
values
plain-values)
;; We must control some rare situations like
;; - Selecting texts and shapes with different fills
;; - Selecting a text and a shape with empty fills
plain-values (if (and shapes-and-texts?
(or
(= (:fills values) :multiple)
(= 0 (count (:fills values)))))
{:fills :multiple
:fill-color :multiple
:fill-opacity :multiple
:fill-color-ref-id :multiple
:fill-color-ref-file :multiple
:fill-color-gradient :multiple}
plain-values)
hide-fill-on-export? (:hide-fill-on-export values false)
checkbox-ref (mf/use-ref)
@ -52,31 +93,47 @@
(mf/use-callback
(mf/deps ids)
(fn [_]
(st/emit! (dc/change-fill ids {:color cp/default-color
:opacity 1}))))
on-delete
(mf/use-callback
(mf/deps ids)
(fn [_]
(st/emit! (dc/change-fill ids (into {} uc/empty-color)))))
(st/emit! (dc/add-fill ids {:color cp/default-color
:opacity 1}))))
on-change
(mf/use-callback
(mf/deps ids)
(fn [index]
(fn [color]
(st/emit! (dc/change-fill ids color index)))))
on-reorder
(mf/use-callback
(mf/deps ids)
(fn [new-index]
(fn [index]
(st/emit! (dc/reorder-fills ids index new-index)))))
on-change-mixed-shapes
(mf/use-callback
(mf/deps ids)
(fn [color]
(let [remove-multiple (fn [[_ value]] (not= value :multiple))
color (into {} (filter remove-multiple) color)]
(st/emit! (dc/change-fill ids color)))))
(st/emit! (dc/change-fill-and-clear ids color))))
on-remove
(fn [index]
(fn []
(st/emit! (dc/remove-fill ids {:color cp/default-color
:opacity 1} index))))
on-remove-all
(fn [_]
(st/emit! (dc/remove-all-fills ids {:color clr/black
:opacity 1})))
on-detach
(mf/use-callback
(mf/deps ids)
(fn []
(let [remove-multiple (fn [[_ value]] (not= value :multiple))
color (-> (into {} (filter remove-multiple) color)
(assoc :id nil :file-id nil))]
(st/emit! (dc/change-fill ids color)))))
(fn [index]
(fn [color]
(let [color (-> color
(assoc :id nil :file-id nil))]
(st/emit! (dc/change-fill ids color index))))))
on-change-show-fill-on-export
(mf/use-callback
@ -95,18 +152,46 @@
(dom/set-attribute checkbox "indeterminate" true)
(dom/remove-attribute checkbox "indeterminate")))))
(if show?
[:div.element-set
[:div.element-set-title
[:span label]
(when (not disable-remove?)
[:div.add-page {:on-click on-delete} i/minus])]
(when (and (not disable-remove?) (not (= :multiple (:fills values))) only-shapes?)
[:div.add-page {:on-click on-add} i/close])]
[:div.element-set-content
[:& color-row {:color color
:title (tr "workspace.options.fill")
:on-change on-change
:on-detach on-detach}]
(if only-shapes?
(cond
(= :multiple (:fills values))
[:div.element-set-options-group
[:div.element-set-label (tr "settings.multiple")]
[:div.element-set-actions
[:div.element-set-actions-button {:on-click on-remove-all}
i/minus]]]
(seq (:fills values))
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:fills values []))]
[:& color-row {:color {:color (:fill-color value)
:opacity (:fill-opacity value)
:id (:fill-color-ref-id value)
:file-id (:fill-color-ref-file value)
:gradient (:fill-color-gradient value)}
:index index
:title (tr "workspace.options.fill")
:on-change (on-change index)
:on-reorder (on-reorder index)
:on-detach (on-detach index)
:on-remove (on-remove index)}])])
[:& color-row {:color {:color (:fill-color plain-values)
:opacity (:fill-opacity plain-values)
:id (:fill-color-ref-id plain-values)
:file-id (:fill-color-ref-file plain-values)
:gradient (:fill-color-gradient plain-values)}
:title (tr "workspace.options.fill")
:on-change on-change-mixed-shapes
:on-detach (on-detach 0)}])
(when (or (= type :frame)
(and (= type :multiple) (some? hide-fill-on-export?)))
@ -118,9 +203,4 @@
:on-change on-change-show-fill-on-export}]
[:label {:for "show-fill-on-export"}
(tr "workspace.options.show-fill-on-export")]])]]
[:div.element-set
[:div.element-set-title
[:span label]
[:div.add-page {:on-click on-add} i/close]]])))
(tr "workspace.options.show-fill-on-export")]])]]))

View file

@ -61,11 +61,12 @@
(if (= v :multiple) nil v))
(mf/defc color-row
[{:keys [color disable-gradient disable-opacity on-change on-detach on-open on-close title]}]
[{:keys [index color disable-gradient disable-opacity on-change on-reorder on-detach on-open on-close title on-remove]}]
(let [current-file-id (mf/use-ctx ctx/current-file-id)
file-colors (mf/deref refs/workspace-file-colors)
shared-libs (mf/deref refs/workspace-libraries)
hover-detach (mf/use-state false)
disable-drag (mf/use-state false)
get-color-name (fn [{:keys [id file-id]}]
(let [src-colors (if (= file-id current-file-id)
@ -77,6 +78,9 @@
(-> color
(update :color #(or % (:value color)))))
detach-value (fn []
(when on-detach (on-detach color)))
change-value (fn [new-value]
(when on-change (on-change (-> color
(assoc :color new-value)
@ -104,7 +108,12 @@
(change-opacity (/ value 100)))
select-all (fn [event]
(dom/select-text! (dom/get-target event)))
(when (not @disable-drag)
(dom/select-text! (dom/get-target event)))
(reset! disable-drag true))
on-blur (fn [_]
(reset! disable-drag false))
handle-click-color (mf/use-callback
(mf/deps color)
@ -115,7 +124,22 @@
handle-open
handle-close))
prev-color (h/use-previous color)]
prev-color (h/use-previous color)
on-drop
(fn [_ data]
(on-reorder (:index data)))
[dprops dref] (if (some? on-reorder)
(h/use-sortable
:data-type "penpot/color-row"
:on-drop on-drop
:disabled @disable-drag
:detect-center? false
:data {:id (str "color-row-" index)
:index index
:name (str "Color row" index)})
[nil nil])]
(mf/use-effect
(mf/deps color prev-color)
@ -123,7 +147,11 @@
(when (not= prev-color color)
(modal/update-props! :colorpicker {:data (parse-color color)}))))
[:div.row-flex.color-data {:title title}
[:div.row-flex.color-data {:title title
:class (dom/classnames
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
[:& cb/color-bullet {:color color
:on-click handle-click-color}]
@ -137,7 +165,7 @@
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false)
:on-click on-detach}
:on-click detach-value}
(if @hover-detach i/unchain i/chain)])]
;; Rendering a gradient
@ -156,6 +184,7 @@
(-> color :color uc/remove-hash))
:placeholder (tr "settings.multiple")
:on-click select-all
:on-blur on-blur
:on-change handle-value-change}]]
(when (and (not disable-opacity)
@ -167,5 +196,7 @@
:on-click select-all
:on-change handle-opacity-change
:min 0
:max 100}]])])]))
:max 100}]])])
(when (some? on-remove)
[:div.element-set-actions-button.remove {:on-click on-remove} i/minus])]))

View file

@ -358,16 +358,40 @@
(= type :path)
(parse-path center svg-data))))
(defn add-library-refs
[props node]
(let [stroke-color-ref-id (get-meta node :stroke-color-ref-id uuid/uuid)
stroke-color-ref-file (get-meta node :stroke-color-ref-file uuid/uuid)
component-id (get-meta node :component-id uuid/uuid)
component-file (get-meta node :component-file uuid/uuid)
shape-ref (get-meta node :shape-ref uuid/uuid)
component-root? (get-meta node :component-root str->bool)]
(cond-> props
(some? stroke-color-ref-id)
(assoc :stroke-color-ref-id stroke-color-ref-id
:stroke-color-ref-file stroke-color-ref-file)
(some? component-id)
(assoc :component-id component-id
:component-file component-file)
component-root?
(assoc :component-root? component-root?)
(some? shape-ref)
(assoc :shape-ref shape-ref))))
(defn add-fill
[props node svg-data]
(let [fill (:fill svg-data)
hide-fill-on-export (get-meta node :hide-fill-on-export str->bool)
fill-color-ref-id (get-meta node :fill-color-ref-id uuid/uuid)
fill-color-ref-file (get-meta node :fill-color-ref-file uuid/uuid)
gradient (when (str/starts-with? fill "url")
(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)]
(parse-gradient node fill))]
(cond-> props
:always
@ -386,14 +410,9 @@
(some? 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))))
(some? fill-color-ref-id)
(assoc :fill-color-ref-id fill-color-ref-id
:fill-color-ref-file fill-color-ref-file))))
(defn add-stroke
[props node svg-data]
@ -658,6 +677,21 @@
props)))
(defn add-fills
[props node svg-data]
(let [fills (-> node
(find-node :defs)
(find-node :pattern)
(find-node :g)
(find-all-nodes :rect)
(reverse))
fills (if (= 0 (count fills))
[(add-fill {} node svg-data)]
(map #(add-fill {} node (get-svg-data :rect %)) fills))]
(-> props
(assoc :fills fills))))
(defn add-svg-content
[props node]
(let [svg-content (get-data node :penpot:svg-content)
@ -715,37 +749,6 @@
svg-data (or image-data pattern-data)]
(:xlink:href svg-data)))
(defn add-library-refs
[props node]
(let [fill-color-ref-id (get-meta node :fill-color-ref-id uuid/uuid)
fill-color-ref-file (get-meta node :fill-color-ref-file uuid/uuid)
stroke-color-ref-id (get-meta node :stroke-color-ref-id uuid/uuid)
stroke-color-ref-file (get-meta node :stroke-color-ref-file uuid/uuid)
component-id (get-meta node :component-id uuid/uuid)
component-file (get-meta node :component-file uuid/uuid)
shape-ref (get-meta node :shape-ref uuid/uuid)
component-root? (get-meta node :component-root str->bool)]
(cond-> props
(some? fill-color-ref-id)
(assoc :fill-color-ref-id fill-color-ref-id
:fill-color-ref-file fill-color-ref-file)
(some? stroke-color-ref-id)
(assoc :stroke-color-ref-id stroke-color-ref-id
:stroke-color-ref-file stroke-color-ref-file)
(some? component-id)
(assoc :component-id component-id
:component-file component-file)
component-root?
(assoc :component-root? component-root?)
(some? shape-ref)
(assoc :shape-ref shape-ref))))
(defn parse-data
[type node]
@ -754,7 +757,6 @@
(-> {}
(add-common-data node)
(add-position type node svg-data)
(add-fill node svg-data)
(add-stroke node svg-data)
(add-layer-options svg-data)
(add-shadows node)
@ -762,6 +764,7 @@
(add-exports node)
(add-svg-attrs node svg-data)
(add-library-refs node)
(add-fills node svg-data)
(cond-> (= :svg-raw type)
(add-svg-content node))