Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 18:18:24 -05:00
Code Issues Activity

🐛 Fix color indicators from unlinked libraries

Browse source
This commit is contained in:
Eva 2022-06-30 12:21:18 +02:00
parent 09a3cf4b58
commit 2c0725a9d2
6 changed files with 100 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -4,6 +4,7 @@
### :bug: Bugs fixed ### :bug: Bugs fixed
- Fix colors from unlinked libs in color selected widget [Taiga #3712](https://tree.taiga.io/project/penpot/issue/3712)
- Fix fill information not complete when paste plain text [Taiga #3680](https://tree.taiga.io/project/penpot/issue/3680) - Fix fill information not complete when paste plain text [Taiga #3680](https://tree.taiga.io/project/penpot/issue/3680)
- Fix problem when resizing groups [Taiga #3702](https://tree.taiga.io/project/penpot/issue/3702) - Fix problem when resizing groups [Taiga #3702](https://tree.taiga.io/project/penpot/issue/3702)

14
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View file

@ -36,12 +36,12 @@
(mf/defc shape-options (mf/defc shape-options
{::mf/wrap [#(mf/throttle % 60)]} {::mf/wrap [#(mf/throttle % 60)]}
[{:keys [shape shapes-with-children page-id file-id]}] [{:keys [shape shapes-with-children page-id file-id shared-libs]}]
[:* [:*
(case (:type shape) (case (:type shape)
:frame [:& frame/options {:shape shape}] :frame [:& frame/options {:shape shape}]
:group [:& group/options {:shape shape :shape-with-children shapes-with-children}] :group [:& group/options {:shape shape :shape-with-children shapes-with-children :file-id file-id :shared-libs shared-libs}]
:text [:& text/options {:shape shape}] :text [:& text/options {:shape shape :file-id file-id :shared-libs shared-libs}]
:rect [:& rect/options {:shape shape}] :rect [:& rect/options {:shape shape}]
:circle [:& circle/options {:shape shape}] :circle [:& circle/options {:shape shape}]
:path [:& path/options {:shape shape}] :path [:& path/options {:shape shape}]
@ -61,6 +61,7 @@
[{:keys [selected section shapes shapes-with-children page-id file-id]}] [{:keys [selected section shapes shapes-with-children page-id file-id]}]
(let [drawing (mf/deref refs/workspace-drawing) (let [drawing (mf/deref refs/workspace-drawing)
base-objects (-> (mf/deref refs/workspace-page-objects)) base-objects (-> (mf/deref refs/workspace-page-objects))
shared-libs (mf/deref refs/workspace-libraries)
modifiers (mf/deref refs/workspace-modifiers) modifiers (mf/deref refs/workspace-modifiers)
objects-modified (mf/with-memo [base-objects modifiers] objects-modified (mf/with-memo [base-objects modifiers]
(gsh/merge-modifiers base-objects modifiers)) (gsh/merge-modifiers base-objects modifiers))
@ -77,16 +78,19 @@
(cond (cond
(d/not-empty? drawing) [:& shape-options {:shape (:object drawing) (d/not-empty? drawing) [:& shape-options {:shape (:object drawing)
:page-id page-id :page-id page-id
:file-id file-id}] :file-id file-id
:shared-libs shared-libs}]
(= 0 (count selected)) [:& page/options] (= 0 (count selected)) [:& page/options]
(= 1 (count selected)) [:& shape-options {:shape (first selected-shapes) (= 1 (count selected)) [:& shape-options {:shape (first selected-shapes)
:page-id page-id :page-id page-id
:file-id file-id :file-id file-id
:shared-libs shared-libs
:shapes-with-children shapes-with-children}] :shapes-with-children shapes-with-children}]
:else [:& multiple/options {:shapes-with-children shapes-with-children :else [:& multiple/options {:shapes-with-children shapes-with-children
:shapes selected-shapes :shapes selected-shapes
:page-id page-id :page-id page-id
:file-id file-id}])]] :file-id file-id
:shared-libs shared-libs}])]]
[:& tab-element {:id :prototype [:& tab-element {:id :prototype
:title (tr "workspace.options.prototype")} :title (tr "workspace.options.prototype")}

121
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View file

@ -15,51 +15,88 @@
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn fill->color-att (defn fill->color-att
[fill] [fill file-id shared-libs]
(let [attrs (d/without-nils {:color (:fill-color fill) (let [color-file-id (:fill-color-ref-file fill)
:opacity (:fill-opacity fill) color-id (:fill-color-ref-id fill)
:id (:fill-color-ref-id fill) shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors])
:file-id (:fill-color-ref-file fill) is-shared? (contains? shared-libs-colors color-id)
:gradient (:fill-color-gradient fill)})] attrs (if (or is-shared? (= color-file-id file-id))
(d/without-nils {:color (str/lower (:fill-color fill))
:opacity (:fill-opacity fill)
:id color-id
:file-id color-file-id
:gradient (:fill-color-gradient fill)})
(d/without-nils {:color (str/lower (:fill-color fill))
:opacity (:fill-opacity fill)
:gradient (:fill-color-gradient fill)}))]
{:attrs attrs {:attrs attrs
:prop :fill :prop :fill
:shape-id (:shape-id fill) :shape-id (:shape-id fill)
:index (:index fill)})) :index (:index fill)}))
(defn stroke->color-att (defn stroke->color-att
[stroke] [stroke file-id shared-libs]
(let [attrs (d/without-nils {:color (:stroke-color stroke) (let [color-file-id (:stroke-color-ref-file stroke)
:opacity (:stroke-opacity stroke) color-id (:stroke-color-ref-id stroke)
:id (:stroke-color-ref-id stroke) shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors])
:file-id (:stroke-color-ref-file stroke) is-shared? (contains? shared-libs-colors color-id)
:gradient (:stroke-color-gradient stroke)})] has-color? (not (nil? (:stroke-color stroke)))
{:attrs attrs attrs (if (or is-shared? (= color-file-id file-id))
:prop :stroke (d/without-nils {:color (str/lower (:stroke-color stroke))
:shape-id (:shape-id stroke) :opacity (:stroke-opacity stroke)
:index (:index stroke)})) :id color-id
:file-id color-file-id
:gradient (:stroke-color-gradient stroke)})
(d/without-nils {:color (str/lower (:stroke-color stroke))
:opacity (:stroke-opacity stroke)
:gradient (:stroke-color-gradient stroke)}))]
(when has-color?
{:attrs attrs
:prop :stroke
:shape-id (:shape-id stroke)
:index (:index stroke)})))
(defn shadow->color-att (defn shadow->color-att
[shadow] [shadow file-id shared-libs]
(let [attrs (d/without-nils {:color (get-in shadow [:color :color]) (let [color-file-id (dm/get-in shadow [:color :file-id])
:opacity (get-in shadow [:color :opacity]) color-id (dm/get-in shadow [:color :id])
:id (get-in shadow [:color :id]) shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors])
:file-id (get-in shadow [:color :file-id]) is-shared? (contains? shared-libs-colors color-id)
:gradient (get-in shadow [:color :gradient])})] attrs (if (or is-shared? (= color-file-id file-id))
(d/without-nils {:color (str/lower (dm/get-in shadow [:color :color]))
:opacity (dm/get-in shadow [:color :opacity])
:id color-id
:file-id (dm/get-in shadow [:color :file-id])
:gradient (dm/get-in shadow [:color :gradient])})
(d/without-nils {:color (str/lower (dm/get-in shadow [:color :color]))
:opacity (dm/get-in shadow [:color :opacity])
:gradient (dm/get-in shadow [:color :gradient])}))]
{:attrs attrs {:attrs attrs
:prop :shadow :prop :shadow
:shape-id (:shape-id shadow) :shape-id (:shape-id shadow)
:index (:index shadow)})) :index (:index shadow)}))
(defn text->color-att (defn text->color-att
[fill] [fill file-id shared-libs]
(let [attrs (d/without-nils {:color (:fill-color fill) (let [color-file-id (:fill-color-ref-file fill)
:opacity (:fill-opacity fill) color-id (:fill-color-ref-id fill)
:id (:fill-color-ref-id fill) shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors])
:file-id (:fill-color-ref-file fill) is-shared? (contains? shared-libs-colors color-id)
:gradient (:fill-color-gradient fill)})] attrs (if (or is-shared? (= color-file-id file-id))
(d/without-nils {:color (str/lower (:fill-color fill))
:opacity (:fill-opacity fill)
:id color-id
:file-id color-file-id
:gradient (:fill-color-gradient fill)})
(d/without-nils {:color (str/lower (:fill-color fill))
:opacity (:fill-opacity fill)
:gradient (:fill-color-gradient fill)}))]
{:attrs attrs {:attrs attrs
:prop :content :prop :content
:shape-id (:shape-id fill) :shape-id (:shape-id fill)
@ -70,14 +107,14 @@
(map-indexed #(assoc %2 :shape-id shape-id :index %1) node)) (map-indexed #(assoc %2 :shape-id shape-id :index %1) node))
(defn extract-text-colors (defn extract-text-colors
[text] [text file-id shared-libs]
(let [content (txt/node-seq txt/is-text-node? (:content text)) (let [content (txt/node-seq txt/is-text-node? (:content text))
content-filtered (map :fills content) content-filtered (map :fills content)
indexed (mapcat #(treat-node % (:id text)) content-filtered)] indexed (mapcat #(treat-node % (:id text)) content-filtered)]
(map text->color-att indexed))) (map #(text->color-att % file-id shared-libs) indexed)))
(defn- extract-all-colors (defn- extract-all-colors
[shapes] [shapes file-id shared-libs]
(reduce (reduce
(fn [list shape] (fn [list shape]
(let [fill-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:fills shape)) (let [fill-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:fills shape))
@ -85,20 +122,20 @@
shadow-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:shadow shape))] shadow-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:shadow shape))]
(if (= :text (:type shape)) (if (= :text (:type shape))
(-> list (-> list
(into (map stroke->color-att) stroke-obj) (into (map #(stroke->color-att % file-id shared-libs)) stroke-obj)
(into (map shadow->color-att) shadow-obj) (into (map #(shadow->color-att % file-id shared-libs)) shadow-obj)
(into (extract-text-colors shape))) (into (extract-text-colors shape file-id shared-libs)))
(-> list (-> list
(into (map fill->color-att) fill-obj) (into (map #(fill->color-att % file-id shared-libs)) fill-obj)
(into (map stroke->color-att) stroke-obj) (into (map #(stroke->color-att % file-id shared-libs)) stroke-obj)
(into (map shadow->color-att) shadow-obj))))) (into (map #(shadow->color-att % file-id shared-libs)) shadow-obj)))))
[] []
shapes)) shapes))
(defn- prepare-colors (defn- prepare-colors
[shapes] [shapes file-id shared-libs]
(let [data (extract-all-colors shapes) (let [data (into [] (remove nil? (extract-all-colors shapes file-id shared-libs)))
grouped-colors (group-by :attrs data) grouped-colors (group-by :attrs data)
all-colors (distinct (mapv :attrs data)) all-colors (distinct (mapv :attrs data))
@ -113,9 +150,9 @@
(mf/defc color-selection-menu (mf/defc color-selection-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
[{:keys [shapes] :as props}] [{:keys [shapes file-id shared-libs] :as props}]
(let [{:keys [all-colors grouped-colors library-colors colors]} (mf/with-memo [shapes] (let [{:keys [all-colors grouped-colors library-colors colors]} (mf/with-memo [shapes file-id shared-libs]
(prepare-colors shapes)) (prepare-colors shapes file-id shared-libs))
expand-lib-color (mf/use-state false) expand-lib-color (mf/use-state false)
expand-color (mf/use-state false) expand-color (mf/use-state false)

6
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -27,7 +27,9 @@
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
shape-with-children (unchecked-get props "shape-with-children") shape-with-children (unchecked-get props "shape-with-children")
shared-libs (unchecked-get props "shared-libs")
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
file-id (unchecked-get props "file-id")
type :group type :group
[measure-ids measure-values] (get-attrs [shape] objects :measure) [measure-ids measure-values] (get-attrs [shape] objects :measure)
@ -55,7 +57,9 @@
(when (> (count objects) 2) (when (> (count objects) 2)
[:& color-selection-menu {:type type [:& color-selection-menu {:type type
:shapes (vals objects)}]) :shapes (vals objects)
:file-id file-id
:shared-libs shared-libs}])
(when-not (empty? shadow-ids) (when-not (empty? shadow-ids)
[:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}])

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -230,6 +230,7 @@
shapes-with-children (unchecked-get props "shapes-with-children") shapes-with-children (unchecked-get props "shapes-with-children")
page-id (unchecked-get props "page-id") page-id (unchecked-get props "page-id")
file-id (unchecked-get props "file-id") file-id (unchecked-get props "file-id")
shared-libs (unchecked-get props "shared-libs")
objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
show-caps (some #(and (= :path (:type %)) (gsh/open-path? %)) shapes) show-caps (some #(and (= :path (:type %)) (gsh/open-path? %)) shapes)
@ -286,7 +287,7 @@
:disable-stroke-style has-text?}]) :disable-stroke-style has-text?}])
(when-not (empty? shapes) (when-not (empty? shapes)
[:& color-selection-menu {:type type :shapes (vals objects-no-measures)}]) [:& color-selection-menu {:file-id file-id :type type :shapes (vals objects-no-measures) :shared-libs shared-libs}])
(when-not (empty? shadow-ids) (when-not (empty? shadow-ids)
[:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}])

6
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View file

@ -21,11 +21,13 @@
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(mf/defc options (mf/defc options
[{:keys [shape] :as props}] [{:keys [shape file-id] :as props}]
(let [ids [(:id shape)] (let [ids [(:id shape)]
type (:type shape) type (:type shape)
state-map (mf/deref refs/workspace-editor-state) state-map (mf/deref refs/workspace-editor-state)
shared-libs (mf/deref refs/workspace-libraries)
editor-state (get state-map (:id shape)) editor-state (get state-map (:id shape))
layer-values (select-keys shape layer-attrs) layer-values (select-keys shape layer-attrs)
@ -89,7 +91,7 @@
:disable-stroke-style true}] :disable-stroke-style true}]
(when (= :multiple (:fills fill-values)) (when (= :multiple (:fills fill-values))
[:& color-selection-menu {:type type :shapes [shape]}]) [:& color-selection-menu {:type type :shapes [shape] :file-id file-id :shared-libs shared-libs}])
[:& shadow-menu [:& shadow-menu
{:ids ids {:ids ids