From 2c0725a9d274f68bfa04ea48fddc719578a4ec30 Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 30 Jun 2022 12:21:18 +0200 Subject: [PATCH] :bug: Fix color indicators from unlinked libraries --- CHANGES.md | 1 + .../main/ui/workspace/sidebar/options.cljs | 14 +- .../options/menus/color_selection.cljs | 121 ++++++++++++------ .../sidebar/options/shapes/group.cljs | 6 +- .../sidebar/options/shapes/multiple.cljs | 3 +- .../sidebar/options/shapes/text.cljs | 6 +- 6 files changed, 100 insertions(+), 51 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 0a7037084..8208c96e2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -4,6 +4,7 @@ ### :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 problem when resizing groups [Taiga #3702](https://tree.taiga.io/project/penpot/issue/3702) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 0628dd74a..34bf8d7b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -36,12 +36,12 @@ (mf/defc shape-options {::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) :frame [:& frame/options {:shape shape}] - :group [:& group/options {:shape shape :shape-with-children shapes-with-children}] - :text [:& text/options {:shape shape}] + :group [:& group/options {:shape shape :shape-with-children shapes-with-children :file-id file-id :shared-libs shared-libs}] + :text [:& text/options {:shape shape :file-id file-id :shared-libs shared-libs}] :rect [:& rect/options {:shape shape}] :circle [:& circle/options {:shape shape}] :path [:& path/options {:shape shape}] @@ -61,6 +61,7 @@ [{:keys [selected section shapes shapes-with-children page-id file-id]}] (let [drawing (mf/deref refs/workspace-drawing) base-objects (-> (mf/deref refs/workspace-page-objects)) + shared-libs (mf/deref refs/workspace-libraries) modifiers (mf/deref refs/workspace-modifiers) objects-modified (mf/with-memo [base-objects modifiers] (gsh/merge-modifiers base-objects modifiers)) @@ -77,16 +78,19 @@ (cond (d/not-empty? drawing) [:& shape-options {:shape (:object drawing) :page-id page-id - :file-id file-id}] + :file-id file-id + :shared-libs shared-libs}] (= 0 (count selected)) [:& page/options] (= 1 (count selected)) [:& shape-options {:shape (first selected-shapes) :page-id page-id :file-id file-id + :shared-libs shared-libs :shapes-with-children shapes-with-children}] :else [:& multiple/options {:shapes-with-children shapes-with-children :shapes selected-shapes :page-id page-id - :file-id file-id}])]] + :file-id file-id + :shared-libs shared-libs}])]] [:& tab-element {:id :prototype :title (tr "workspace.options.prototype")} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 234c7cc06..e6a3f463d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -15,51 +15,88 @@ [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.util.i18n :as i18n :refer [tr]] + [cuerdas.core :as str] [rumext.alpha :as mf])) (defn fill->color-att - [fill] - (let [attrs (d/without-nils {:color (:fill-color fill) - :opacity (:fill-opacity fill) - :id (:fill-color-ref-id fill) - :file-id (:fill-color-ref-file fill) - :gradient (:fill-color-gradient fill)})] + [fill file-id shared-libs] + (let [color-file-id (:fill-color-ref-file fill) + color-id (:fill-color-ref-id fill) + shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors]) + is-shared? (contains? shared-libs-colors color-id) + 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 :prop :fill :shape-id (:shape-id fill) :index (:index fill)})) (defn stroke->color-att - [stroke] - (let [attrs (d/without-nils {:color (:stroke-color stroke) - :opacity (:stroke-opacity stroke) - :id (:stroke-color-ref-id stroke) - :file-id (:stroke-color-ref-file stroke) - :gradient (:stroke-color-gradient stroke)})] - {:attrs attrs - :prop :stroke - :shape-id (:shape-id stroke) - :index (:index stroke)})) + [stroke file-id shared-libs] + (let [color-file-id (:stroke-color-ref-file stroke) + color-id (:stroke-color-ref-id stroke) + shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors]) + is-shared? (contains? shared-libs-colors color-id) + has-color? (not (nil? (:stroke-color stroke))) + attrs (if (or is-shared? (= color-file-id file-id)) + (d/without-nils {:color (str/lower (:stroke-color stroke)) + :opacity (:stroke-opacity 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 - [shadow] - (let [attrs (d/without-nils {:color (get-in shadow [:color :color]) - :opacity (get-in shadow [:color :opacity]) - :id (get-in shadow [:color :id]) - :file-id (get-in shadow [:color :file-id]) - :gradient (get-in shadow [:color :gradient])})] + [shadow file-id shared-libs] + (let [color-file-id (dm/get-in shadow [:color :file-id]) + color-id (dm/get-in shadow [:color :id]) + shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors]) + is-shared? (contains? shared-libs-colors color-id) + 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 :prop :shadow :shape-id (:shape-id shadow) :index (:index shadow)})) (defn text->color-att - [fill] - (let [attrs (d/without-nils {:color (:fill-color fill) - :opacity (:fill-opacity fill) - :id (:fill-color-ref-id fill) - :file-id (:fill-color-ref-file fill) - :gradient (:fill-color-gradient fill)})] + [fill file-id shared-libs] + (let [color-file-id (:fill-color-ref-file fill) + color-id (:fill-color-ref-id fill) + shared-libs-colors (dm/get-in shared-libs [color-file-id :data :colors]) + is-shared? (contains? shared-libs-colors color-id) + 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 :prop :content :shape-id (:shape-id fill) @@ -70,14 +107,14 @@ (map-indexed #(assoc %2 :shape-id shape-id :index %1) node)) (defn extract-text-colors - [text] + [text file-id shared-libs] (let [content (txt/node-seq txt/is-text-node? (:content text)) content-filtered (map :fills content) 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 - [shapes] + [shapes file-id shared-libs] (reduce (fn [list 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))] (if (= :text (:type shape)) (-> list - (into (map stroke->color-att) stroke-obj) - (into (map shadow->color-att) shadow-obj) - (into (extract-text-colors shape))) + (into (map #(stroke->color-att % file-id shared-libs)) stroke-obj) + (into (map #(shadow->color-att % file-id shared-libs)) shadow-obj) + (into (extract-text-colors shape file-id shared-libs))) (-> list - (into (map fill->color-att) fill-obj) - (into (map stroke->color-att) stroke-obj) - (into (map shadow->color-att) shadow-obj))))) + (into (map #(fill->color-att % file-id shared-libs)) fill-obj) + (into (map #(stroke->color-att % file-id shared-libs)) stroke-obj) + (into (map #(shadow->color-att % file-id shared-libs)) shadow-obj))))) [] shapes)) (defn- prepare-colors - [shapes] - (let [data (extract-all-colors shapes) + [shapes file-id shared-libs] + (let [data (into [] (remove nil? (extract-all-colors shapes file-id shared-libs))) grouped-colors (group-by :attrs data) all-colors (distinct (mapv :attrs data)) @@ -113,9 +150,9 @@ (mf/defc color-selection-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]} - [{:keys [shapes] :as props}] - (let [{:keys [all-colors grouped-colors library-colors colors]} (mf/with-memo [shapes] - (prepare-colors shapes)) + [{:keys [shapes file-id shared-libs] :as props}] + (let [{:keys [all-colors grouped-colors library-colors colors]} (mf/with-memo [shapes file-id shared-libs] + (prepare-colors shapes file-id shared-libs)) expand-lib-color (mf/use-state false) expand-color (mf/use-state false) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index f74b44493..e3ae1c922 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -27,7 +27,9 @@ [props] (let [shape (unchecked-get props "shape") 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)))) + file-id (unchecked-get props "file-id") type :group [measure-ids measure-values] (get-attrs [shape] objects :measure) @@ -55,7 +57,9 @@ (when (> (count objects) 2) [:& color-selection-menu {:type type - :shapes (vals objects)}]) + :shapes (vals objects) + :file-id file-id + :shared-libs shared-libs}]) (when-not (empty? shadow-ids) [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index b7273638d..adbddb574 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -230,6 +230,7 @@ shapes-with-children (unchecked-get props "shapes-with-children") page-id (unchecked-get props "page-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)))) show-caps (some #(and (= :path (:type %)) (gsh/open-path? %)) shapes) @@ -286,7 +287,7 @@ :disable-stroke-style has-text?}]) (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) [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index f90ff6b32..5cdf25e46 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -21,11 +21,13 @@ [rumext.alpha :as mf])) (mf/defc options - [{:keys [shape] :as props}] + [{:keys [shape file-id] :as props}] (let [ids [(:id shape)] type (:type shape) state-map (mf/deref refs/workspace-editor-state) + shared-libs (mf/deref refs/workspace-libraries) + editor-state (get state-map (:id shape)) layer-values (select-keys shape layer-attrs) @@ -89,7 +91,7 @@ :disable-stroke-style true}] (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 {:ids ids