From 9b2b16c066f66a9c1cf404b1a477f4233417bbc8 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 16 Oct 2020 13:12:13 +0200 Subject: [PATCH] :sparkles: Synchronize gradient colors libraries --- common/app/common/pages.cljc | 3 - .../styles/main/partials/color-bullet.scss | 4 ++ frontend/src/app/main/data/colors.cljs | 3 +- .../app/main/data/workspace/libraries.cljs | 22 ++++--- .../data/workspace/libraries_helpers.cljs | 58 ++++++++++++------- .../app/main/ui/components/color_bullet.cljs | 3 +- .../app/main/ui/workspace/colorpalette.cljs | 4 +- .../app/main/ui/workspace/sidebar/assets.cljs | 2 +- .../ui/workspace/sidebar/options/fill.cljs | 15 +++-- .../sidebar/options/rows/color_row.cljs | 2 +- .../ui/workspace/sidebar/options/stroke.cljs | 11 +--- 11 files changed, 68 insertions(+), 59 deletions(-) diff --git a/common/app/common/pages.cljc b/common/app/common/pages.cljc index 93dc8ec04..8dee8154d 100644 --- a/common/app/common/pages.cljc +++ b/common/app/common/pages.cljc @@ -272,9 +272,6 @@ :rx :radius-group :ry :radius-group}) -(def color-sync-attrs [:fill-color - :stroke-color]) - (s/def ::minimal-shape (s/keys :req-un [::type ::name] :opt-un [::id])) diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index abde93a40..b4ee15997 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -110,6 +110,10 @@ ul.palette-menu .color-bullet { } } +.color-data .color-bullet.is-library-color { + border-radius: 50%; +} + .color-data .color-bullet { background-color: $color-gray-30; border: 1px solid $color-gray-30; diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs index 049452a00..ae866dd50 100644 --- a/frontend/src/app/main/data/colors.cljs +++ b/frontend/src/app/main/data/colors.cljs @@ -138,7 +138,8 @@ (ptk/reify ::change-stroke ptk/WatchEvent (watch [_ state s] - (let [objects (get-in state [:workspace-data :pages-index (:current-page-id state) :objects]) + (let [pid (:current-page-id state) + objects (get-in state [:workspace-data :pages-index pid :objects]) not-frame (fn [shape-id] (not= (get-in objects [shape-id :type]) :frame)) children (->> ids (filter not-frame) (mapcat #(cph/get-children % objects))) ids (into ids children) diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 81d1b7028..94badbbd6 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -458,14 +458,18 @@ (watch [_ state stream] ;; ===== Uncomment this to debug ===== ;; (js/console.info "##### SYNC-FILE" (str (or file-id "local"))) - (let [[rchanges1 uchanges1] (dwlh/generate-sync-file :components file-id state) - [rchanges2 uchanges2] (dwlh/generate-sync-library :components file-id state) - [rchanges3 uchanges3] (dwlh/generate-sync-file :colors file-id state) - [rchanges4 uchanges4] (dwlh/generate-sync-library :colors file-id state) - [rchanges5 uchanges5] (dwlh/generate-sync-file :typographies file-id state) - [rchanges6 uchanges6] (dwlh/generate-sync-library :typographies file-id state) - rchanges (d/concat rchanges1 rchanges2 rchanges3 rchanges4 rchanges5 rchanges6) - uchanges (d/concat uchanges1 uchanges2 uchanges3 uchanges4 uchanges5 uchanges6)] + (let [library-changes [(dwlh/generate-sync-library :components file-id state) + (dwlh/generate-sync-library :colors file-id state) + (dwlh/generate-sync-library :typographies file-id state)] + file-changes [(dwlh/generate-sync-file :components file-id state) + (dwlh/generate-sync-file :colors file-id state) + (dwlh/generate-sync-file :typographies file-id state)] + rchanges (d/concat [] + (->> library-changes (remove nil?) (map first) (flatten)) + (->> file-changes (remove nil?) (map first) (flatten))) + uchanges (d/concat [] + (->> library-changes (remove nil?) (map second) (flatten)) + (->> file-changes (remove nil?) (map second) (flatten)))] ;; ===== Uncomment this to debug ===== ;; (js/console.debug "rchanges" (clj->js rchanges)) (rx/concat @@ -476,7 +480,7 @@ (rp/mutation :update-sync {:file-id (get-in state [:workspace-file :id]) :library-id file-id})) - (when (or (seq rchanges2) (seq rchanges4) (seq rchanges6)) + (when (some? library-changes) (rx/of (sync-file-2nd-stage file-id)))))))) (defn sync-file-2nd-stage diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index 8585f0d10..6144cbcfb 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -19,6 +19,15 @@ (defonce empty-changes [[] []]) +(defonce color-sync-attrs + [[:fill-color-ref-id :color :fill-color] + [:fill-color-ref-id :gradient :fill-color-gradient] + [:fill-color-ref-id :opacity :fill-opacity] + + [:stroke-color-ref-id :color :stroke-color] + [:stroke-color-ref-id :gradient :stroke-color-gradient] + [:stroke-color-ref-id :opacity :stroke-opacity]]) + (declare generate-sync-container) (declare generate-sync-shape) (declare has-asset-reference-fn) @@ -176,15 +185,17 @@ :content ;; Check if any node in the content has a reference for the library (ut/some-node - #(and (some? (:fill-color-ref-id %)) - (= library-id (:fill-color-ref-file %))))) + #(or (and (some? (:stroke-color-ref-id %)) + (= library-id (:stroke-color-ref-file %))) + (and (some? (:fill-color-ref-id %)) + (= library-id (:fill-color-ref-file %)))))) (some #(let [attr (name %) attr-ref-id (keyword (str attr "-ref-id")) attr-ref-file (keyword (str attr "-ref-file"))] (and (get shape attr-ref-id) (= library-id (get shape attr-ref-file)))) - cp/color-sync-attrs))) + (map #(nth % 2) color-sync-attrs)))) :typographies (fn [shape] @@ -238,6 +249,7 @@ empty-changes [rchanges lchanges]))) + (defmethod generate-sync-shape :colors [_ library-id state _ page-id component-id shape] @@ -247,13 +259,16 @@ (if (= :text (:type shape)) (let [update-node (fn [node] (if-let [color (get colors (:fill-color-ref-id node))] - (assoc node :fill-color (:value color)) + (assoc node + :fill-color (:color color) + :fill-opacity (:opacity color) + :fill-color-gradient (:gradient color)) node))] (generate-sync-text-shape shape page-id component-id update-node)) - (loop [attrs (seq cp/color-sync-attrs) + (loop [attrs (seq color-sync-attrs) roperations [] uoperations []] - (let [attr (first attrs)] + (let [[attr-ref-id color-attr attr] (first attrs)] (if (nil? attr) (if (empty? roperations) empty-changes @@ -268,23 +283,22 @@ :id (:id shape) :operations uoperations})]] [rchanges uchanges])) - (let [attr-ref-id (keyword (str (name attr) "-ref-id"))] - (if-not (contains? shape attr-ref-id) + (if-not (contains? shape attr-ref-id) + (recur (next attrs) + roperations + uoperations) + (let [color (get colors (get shape attr-ref-id)) + roperation {:type :set + :attr attr + :val (color-attr color) + :ignore-touched true} + uoperation {:type :set + :attr attr + :val (get shape attr) + :ignore-touched true}] (recur (next attrs) - roperations - uoperations) - (let [color (get colors (get shape attr-ref-id)) - roperation {:type :set - :attr attr - :val (:value color) - :ignore-touched true} - uoperation {:type :set - :attr attr - :val (get shape attr) - :ignore-touched true}] - (recur (next attrs) - (conj roperations roperation) - (conj uoperations uoperation))))))))))) + (conj roperations roperation) + (conj uoperations uoperation)))))))))) (defmethod generate-sync-shape :typographies [_ library-id state _ page-id component-id shape] diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index c4acf00ce..017eec05f 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -19,7 +19,8 @@ ;; No multiple selection (let [color (if (string? color) {:color color :opacity 1} color)] - [:div.color-bullet {:on-click #(when on-click (on-click %))} + [:div.color-bullet {:class (when (:id color) "is-library-color") + :on-click #(when on-click (on-click %))} (when (not (:gradient color)) [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]) diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index 9aa0b0166..ac2ef1bb5 100644 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs @@ -50,9 +50,7 @@ ;; --- Components (mf/defc palette-item [{:keys [color size local?]}] - (let [id (:id color) - file-id (:file-id color) - select-color + (let [select-color (fn [event] (let [ids (get-in @st/state [:workspace-local :selected])] (if (kbd/shift? event) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index a4930e09b..098f5beaf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -336,7 +336,7 @@ (let [color (cond-> color (:value color) (assoc :color (:value color) :opacity 1) (:value color) (dissoc :value) - true (assoc :file-id file-id))] + true (assoc :file-id (when (not local?) file-id)))] [:& color-item {:key (:id color) :color color :local? local? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs index b2b879a7e..b1a56c0ef 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs @@ -21,7 +21,12 @@ [app.util.i18n :as i18n :refer [tr t]] [app.util.object :as obj])) -(def fill-attrs [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file :fill-color-gradient]) +(def fill-attrs + [:fill-color + :fill-opacity + :fill-color-ref-id + :fill-color-ref-file + :fill-color-gradient]) (defn- fill-menu-props-equals? [np op] @@ -33,13 +38,7 @@ old-values (obj/get op "values")] (and (= new-ids old-ids) (= new-editor old-editor) - (= (:fill-color new-values) - (:fill-color old-values)) - (= (:fill-opacity new-values) - (:fill-opacity old-values)) - (= (:fill-color-gradient new-values) - (:fill-color-gradient old-values))))) - + (every? #(identical? (% new-values) (% old-values)) fill-attrs)))) (mf/defc fill-menu {::mf/wrap [#(mf/memo' % fill-menu-props-equals?)]} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 2347e0d09..2a6437fb5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -128,7 +128,7 @@ [:div.row-flex.color-data [:& cb/color-bullet {:color color - :on-click handle-click-color}] + :on-click handle-click-color}] (cond ;; Rendering a color with ID diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs index 4dd600c14..6419805d2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs @@ -40,16 +40,7 @@ new-values (obj/get np "values") old-values (obj/get op "values")] (and (= new-ids old-ids) - (identical? (:stroke-style new-values) - (:stroke-style old-values)) - (identical? (:stroke-alignment new-values) - (:stroke-alignment old-values)) - (identical? (:stroke-width new-values) - (:stroke-width old-values)) - (identical? (:stroke-color new-values) - (:stroke-color old-values)) - (identical? (:stroke-opacity new-values) - (:stroke-opacity old-values))))) + (every? #(identical? (% new-values) (% old-values)) stroke-attrs)))) (defn- width->string [width] (if (= width :multiple)