Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-13 15:31:26 -05:00
Code Issues Activity

✨ Synchronize gradient colors libraries

Browse source
This commit is contained in:
alonso.torres 2020-10-16 13:12:13 +02:00 • committed by Hirunatan
parent 567e177699
commit 9b2b16c066
11 changed files with 68 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
common/app/common/pages.cljc
View file

@ -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]))

4
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -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;

3
frontend/src/app/main/data/colors.cljs
View file

@ -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)

22
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -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

58
frontend/src/app/main/data/workspace/libraries_helpers.cljs
View file

@ -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]

3
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -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))}}])

4
frontend/src/app/main/ui/workspace/colorpalette.cljs
View file

@ -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)

2
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -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?

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

@ -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?)]}

2
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -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

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

@ -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)