mirror of
https://github.com/penpot/penpot.git
synced 2025-08-07 14:38:33 +02:00
🐛 Handle fill when multi selecting texts and other shapes
This commit is contained in:
parent
87fa5547be
commit
63eec77044
4 changed files with 40 additions and 7 deletions
|
@ -11,7 +11,9 @@
|
||||||
(:require
|
(:require
|
||||||
[rumext.alpha :as mf]
|
[rumext.alpha :as mf]
|
||||||
[uxbox.main.data.workspace.common :as dwc]
|
[uxbox.main.data.workspace.common :as dwc]
|
||||||
|
[uxbox.main.data.workspace.texts :as dwt]
|
||||||
[uxbox.main.store :as st]
|
[uxbox.main.store :as st]
|
||||||
|
[uxbox.main.refs :as refs]
|
||||||
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||||
[uxbox.util.object :as obj]
|
[uxbox.util.object :as obj]
|
||||||
[uxbox.util.i18n :as i18n :refer [tr t]]))
|
[uxbox.util.i18n :as i18n :refer [tr t]]))
|
||||||
|
@ -34,17 +36,34 @@
|
||||||
{::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
|
{::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
|
||||||
[{:keys [ids type values] :as props}]
|
[{:keys [ids type values] :as props}]
|
||||||
(let [locale (i18n/use-locale)
|
(let [locale (i18n/use-locale)
|
||||||
|
|
||||||
|
shapes (deref (refs/objects-by-id ids))
|
||||||
|
text-ids (map :id (filter #(= (:type %) :text) shapes))
|
||||||
|
other-ids (map :id (filter #(not= (:type %) :text) shapes))
|
||||||
|
|
||||||
label (case type
|
label (case type
|
||||||
:multiple (t locale "workspace.options.selection-fill")
|
:multiple (t locale "workspace.options.selection-fill")
|
||||||
:group (t locale "workspace.options.group-fill")
|
:group (t locale "workspace.options.group-fill")
|
||||||
(t locale "workspace.options.fill"))
|
(t locale "workspace.options.fill"))
|
||||||
color {:value (:fill-color values)
|
color {:value (:fill-color values)
|
||||||
:opacity (:fill-opacity values)}
|
:opacity (:fill-opacity values)}
|
||||||
|
|
||||||
handle-change-color (fn [value opacity]
|
handle-change-color (fn [value opacity]
|
||||||
(let [change #(cond-> %
|
(let [change #(cond-> %
|
||||||
value (assoc :fill-color value)
|
value (assoc :fill-color value)
|
||||||
opacity (assoc :fill-opacity opacity))]
|
opacity (assoc :fill-opacity opacity))
|
||||||
(st/emit! (dwc/update-shapes ids change))))]
|
new-attrs (cond-> {}
|
||||||
|
value (assoc :fill value)
|
||||||
|
opacity (assoc :opacity opacity))]
|
||||||
|
|
||||||
|
(when-not (empty? other-ids)
|
||||||
|
(st/emit! (dwc/update-shapes ids change)))
|
||||||
|
(when-not (empty? text-ids)
|
||||||
|
(run! #(st/emit! (dwt/update-text-attrs
|
||||||
|
{:id %
|
||||||
|
:editor nil
|
||||||
|
:attrs new-attrs}))
|
||||||
|
text-ids))))]
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title label]
|
[:div.element-set-title label]
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
|
|
|
@ -11,17 +11,29 @@
|
||||||
(:require
|
(:require
|
||||||
[rumext.alpha :as mf]
|
[rumext.alpha :as mf]
|
||||||
[uxbox.common.geom.shapes :as geom]
|
[uxbox.common.geom.shapes :as geom]
|
||||||
|
[uxbox.main.data.workspace.texts :as dwt]
|
||||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
|
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
|
||||||
|
[uxbox.main.ui.workspace.sidebar.options.text :refer [text-fill-attrs]]
|
||||||
[uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
|
[uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
|
||||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]))
|
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]))
|
||||||
|
|
||||||
|
(defn- get-attrs
|
||||||
|
[shape attrs text-attrs]
|
||||||
|
(if (not= (:type shape) :text)
|
||||||
|
(select-keys shape attrs)
|
||||||
|
(let [text-values (dwt/current-text-values {:editor nil
|
||||||
|
:shape shape
|
||||||
|
:attrs text-attrs})
|
||||||
|
converted-values (zipmap fill-attrs
|
||||||
|
(map #(% text-values) text-attrs))]
|
||||||
|
converted-values)))
|
||||||
|
|
||||||
(mf/defc options
|
(mf/defc options
|
||||||
{::mf/wrap [mf/memo]}
|
{::mf/wrap [mf/memo]}
|
||||||
[{:keys [shapes] :as props}]
|
[{:keys [shapes] :as props}]
|
||||||
(let [ids (map :id shapes)
|
(let [ids (map :id shapes)
|
||||||
measure-values (geom/get-attrs-multi shapes measure-attrs)
|
measure-values (geom/get-attrs-multi shapes measure-attrs)
|
||||||
fill-values (geom/get-attrs-multi shapes fill-attrs)
|
fill-values (geom/get-attrs-multi (map #(get-attrs % fill-attrs text-fill-attrs) shapes) fill-attrs)
|
||||||
stroke-values (geom/get-attrs-multi shapes stroke-attrs)]
|
stroke-values (geom/get-attrs-multi shapes stroke-attrs)]
|
||||||
[:*
|
[:*
|
||||||
[:& measures-menu {:ids ids
|
[:& measures-menu {:ids ids
|
||||||
|
|
|
@ -65,7 +65,7 @@
|
||||||
:group (t locale "workspace.options.group-stroke")
|
:group (t locale "workspace.options.group-stroke")
|
||||||
(t locale "workspace.options.stroke"))
|
(t locale "workspace.options.stroke"))
|
||||||
|
|
||||||
show-options (not= (:stroke-style values :none) :none)
|
show-options (not= (or (:stroke-style values) :none) :none)
|
||||||
|
|
||||||
current-stroke-color {:value (:stroke-color values)
|
current-stroke-color {:value (:stroke-color values)
|
||||||
:opacity (:stroke-opacity values)}
|
:opacity (:stroke-opacity values)}
|
||||||
|
|
|
@ -25,6 +25,8 @@
|
||||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||||
["slate" :refer [Transforms]]))
|
["slate" :refer [Transforms]]))
|
||||||
|
|
||||||
|
(def text-fill-attrs [:fill :opacity])
|
||||||
|
|
||||||
(defn- attr->string [value]
|
(defn- attr->string [value]
|
||||||
(if (= value :multiple)
|
(if (= value :multiple)
|
||||||
""
|
""
|
||||||
|
@ -201,7 +203,7 @@
|
||||||
(let [text-color (dwt/current-text-values
|
(let [text-color (dwt/current-text-values
|
||||||
{:editor editor
|
{:editor editor
|
||||||
:shape shape
|
:shape shape
|
||||||
:attrs [:fill :opacity]})
|
:attrs text-fill-attrs})
|
||||||
|
|
||||||
current-color {:value (:fill text-color)
|
current-color {:value (:fill text-color)
|
||||||
:opacity (:opacity text-color)}
|
:opacity (:opacity text-color)}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue