Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-04 02:51:20 -05:00
Code Issues Activity

🐛 Fixes problems with multiple values in fill and stroke

Browse source
This commit is contained in:
alonso.torres 2021-02-03 12:10:43 +01:00 • committed by Hirunatan
parent 62b6b12066
commit 7378089f4a
8 changed files with 79 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -134,11 +134,21 @@
text-ids (filter is-text? ids)
shape-ids (filter (comp not is-text?) ids)
attrs {:fill-color (:color color)
:fill-color-ref-id (:id color)
:fill-color-ref-file (:file-id color)
:fill-color-gradient (:gradient color)
:fill-opacity (:opacity color)}
attrs (cond-> {}
(contains? color :color)
(assoc :fill-color (:color color))
(contains? color :id)
(assoc :fill-color-ref-id (:id color))
(contains? color :file-id)
(assoc :fill-color-ref-file (:file-id color))
(contains? color :gradient)
(assoc :fill-color-gradient (:gradient color))
(contains? color :opacity)
(assoc :fill-opacity (:opacity color)))
update-fn (fn [shape] (merge shape attrs))
editors (get-in state [:workspace-local :editors])
@ -157,19 +167,30 @@
(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))
update-fn (fn [s]
(cond-> s
true
(assoc :stroke-color (:color color)
:stroke-opacity (:opacity color)
:stroke-color-gradient (:gradient color)
:stroke-color-ref-id (:id color)
:stroke-color-ref-file (:file-id color))
(= (:stroke-style s) :none)
(assoc :stroke-style :solid
:stroke-width 1
:stroke-opacity 1)))]
color-attrs (cond-> {}
(contains? color :color)
(assoc :stroke-color (:color color))
(contains? color :id)
(assoc :stroke-color-ref-id (:id color))
(contains? color :file-id)
(assoc :stroke-color-ref-file (:file-id color))
(contains? color :gradient)
(assoc :stroke-color-gradient (:gradient color))
(contains? color :opacity)
(assoc :stroke-opacity (:opacity color)))
update-fn (fn [shape]
(-> shape
(merge color-attrs)
(cond-> (= (:stroke-style s) :none)
(assoc :stroke-style :solid
:stroke-width 1
:stroke-opacity 1))))]
(rx/of (dwc/update-shapes ids update-fn))))))
(defn picker-for-selected-shape

4
frontend/src/app/main/refs.cljs
View file

@ -12,6 +12,7 @@
(:require
[beicon.core :as rx]
[okulary.core :as l]
[app.common.data :as d]
[app.common.pages :as cp]
[app.common.uuid :as uuid]
[app.main.constants :as c]
@ -109,7 +110,8 @@
(def workspace-file-colors
(l/derived (fn [state]
(when-let [file (:workspace-file state)]
(get-in file [:data :colors])))
(->> (get-in file [:data :colors])
(d/mapm #(assoc %2 :file-id (:id file))))))
st/state))
(def workspace-recent-colors

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

@ -19,7 +19,7 @@
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.keyboard :as kbd]
[app.util.color :refer [hex->rgb]]
[app.util.color :as uc]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]]
[app.util.object :as obj]
@ -55,8 +55,8 @@
(fn [event]
(let [ids (get-in @st/state [:workspace-local :selected])]
(if (kbd/shift? event)
(st/emit! (mdc/change-stroke ids color))
(st/emit! (mdc/change-fill ids color)))))]
(st/emit! (mdc/change-stroke ids (merge uc/empty-color color)))
(st/emit! (mdc/change-fill ids (merge uc/empty-color color))))))]
[:div.color-cell {:class (str "cell-"(name size))
:on-click select-color}

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

@ -9,17 +9,18 @@
(ns app.main.ui.workspace.sidebar.options.fill
(:require
[rumext.alpha :as mf]
[app.common.pages :as cp]
[app.main.data.colors :as dc]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.texts :as dwt]
[app.main.data.colors :as dc]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.color :as uc]
[app.util.i18n :as i18n :refer [tr t]]
[app.util.object :as obj]))
[app.util.object :as obj]
[rumext.alpha :as mf]))
(def fill-attrs
[:fill-color
@ -57,19 +58,24 @@
(mf/use-callback
(mf/deps ids)
(fn [event]
(st/emit! (dc/change-fill ids nil))))
(st/emit! (dc/change-fill ids (into {} uc/empty-color)))))
on-change
(mf/use-callback
(mf/deps ids)
(fn [color]
(st/emit! (dc/change-fill ids color))))
(let [remove-multiple (fn [[key value]] (not= value :multiple))
color (into {} (filter remove-multiple) color)]
(st/emit! (dc/change-fill ids color)))))
on-detach
(mf/use-callback
(mf/deps ids)
(fn []
(st/emit! (dc/change-fill ids (dissoc color :id :file-id)))))
(let [remove-multiple (fn [[key value]] (not= value :multiple))
color (-> (into {} (filter remove-multiple) color)
(assoc :id nil :file-id nil))]
(st/emit! (dc/change-fill ids color)))))
on-open-picker
(mf/use-callback

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

@ -82,10 +82,13 @@
(dissoc :gradient)))))
change-opacity (fn [new-opacity]
(when on-change (on-change (assoc color :opacity new-opacity))))
(when on-change (on-change (assoc color
:opacity new-opacity
:id nil
:file-id nil))))
handle-pick-color (fn [color]
(when on-change (on-change color)))
(when on-change (on-change (merge uc/empty-color color))))
handle-open (fn [] (when on-open (on-open)))
@ -133,7 +136,7 @@
(cond
;; Rendering a color with ID
(:id color)
(and (:id color) (not (uc/multiple? color)))
[:*
[:div.color-info
[:div.color-name (str (get-color-name color))]]
@ -146,7 +149,8 @@
;; Rendering a gradient
(and (not (uc/multiple? color))
(:gradient color) (get-in color [:gradient :type]))
(:gradient color)
(get-in color [:gradient :type]))
[:div.color-info
[:div.color-name (cb/gradient-type->string (get-in color [:gradient :type]))]]

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

@ -78,11 +78,12 @@
update-color
(fn [index]
(fn [color opacity]
(st/emit! (dwc/update-shapes
ids
#(-> %
(assoc-in [:shadow index :color] color)
(assoc-in [:shadow index :opacity] opacity))))))
(let [color (d/without-keys color [:id :file-id :gradient])]
(st/emit! (dwc/update-shapes
ids
#(-> %
(assoc-in [:shadow index :color] color)
(assoc-in [:shadow index :opacity] opacity)))))))
detach-color
(fn [index]

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

@ -66,7 +66,9 @@
(mf/use-callback
(mf/deps ids)
(fn [color]
(st/emit! (dc/change-stroke ids color))))
(let [remove-multiple (fn [[key value]] (not= value :multiple))
color (into {} (filter remove-multiple) color)]
(st/emit! (dc/change-stroke ids color)))))
handle-detach
(mf/use-callback

8
frontend/src/app/util/color.cljs
View file

@ -109,12 +109,16 @@
:else "transparent")))
(defn multiple? [{:keys [value color gradient]}]
(defn multiple? [{:keys [id file-id value color gradient]}]
(or (= value :multiple)
(= color :multiple)
(= gradient :multiple)
(and gradient color)))
(= id :multiple)
(= file-id :multiple)))
(defn parse-color [^string color-str]
(let [result (gcolor/parse color-str)]
(str (.-hex ^js result))))
(def empty-color
(into {} (map #(vector % nil)) [:color :id :file-id :gradient :opacity]))