Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-11 23:31:21 -05:00
Code Issues Activity

🎉 Implement ability to preview layer blend modes

Browse source 
Signed-off-by: Akshay Gupta <gravity.akshay@gmail.com>
This commit is contained in:
Akshay Gupta 2023-05-15 01:21:23 +05:30 • committed by Alejandro Alonso
parent 749fc61885
commit eec2fd00a2
2 changed files with 70 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/components/select.cljs
View file

@ -12,9 +12,9 @@
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc select [{:keys [default-value options class on-change]}] (mf/defc select [{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option]}]
(let [state (mf/use-state {:id (uuid/next) (let [state (mf/use-state {:id (uuid/next)
:is-open? false :is-open? (or is-open? false)
:current-value default-value}) :current-value default-value})
open-dropdown #(swap! state assoc :is-open? true) open-dropdown #(swap! state assoc :is-open? true)
close-dropdown #(swap! state assoc :is-open? false) close-dropdown #(swap! state assoc :is-open? false)
@ -22,14 +22,20 @@
(fn [_] (fn [_]
(swap! state assoc :current-value value) (swap! state assoc :current-value value)
(when on-change (on-change value)))) (when on-change (on-change value))))
highlight-item (fn [value]
(when on-pointer-enter-option (on-pointer-enter-option value)))
unhighlight-item (fn [value]
(when on-pointer-leave-option (on-pointer-leave-option value)))
as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item])) as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item]))
value->label (into {} (->> options value->label (into {} (->> options
(map as-key-value))) ] (map as-key-value))) ]
(mf/use-effect (mf/use-effect
(mf/deps options) (mf/deps options)
#(reset! state {:is-open? false #(if is-open?
:current-value default-value})) (reset! state (assoc @state :current-value default-value))
(reset! state {:is-open? false
:current-value default-value})))
[:div.custom-select {:on-click open-dropdown [:div.custom-select {:on-click open-dropdown
:class class} :class class}
@ -45,6 +51,8 @@
[:li.checked-element [:li.checked-element
{:key (dm/str (:id @state) "-" index) {:key (dm/str (:id @state) "-" index)
:class (when (= value (-> @state :current-value)) "is-selected") :class (when (= value (-> @state :current-value)) "is-selected")
:on-pointer-enter #(highlight-item value)
:on-pointer-leave #(unhighlight-item value)
:on-click (select-item value)} :on-click (select-item value)}
[:span.check-icon i/tick] [:span.check-icon i/tick]
[:span label]])))]]])) [:span label]])))]]]))

88
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -10,6 +10,7 @@
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -28,7 +29,11 @@
(dom/select-text! (dom/get-target event))) (dom/select-text! (dom/get-target event)))
(mf/defc layer-menu [{:keys [ids type values]}] (mf/defc layer-menu [{:keys [ids type values]}]
(let [change! (let [selected-blend-mode (mf/use-state (or (d/name (:blend-mode values)) "normal"))
is-option-highlighted? (mf/use-state false)
is-preview-complete? (mf/use-state true)
change!
(mf/use-callback (mf/use-callback
(mf/deps ids) (mf/deps ids)
(fn [prop value] (fn [prop value]
@ -37,10 +42,30 @@
handle-change-blend-mode handle-change-blend-mode
(mf/use-callback (mf/use-callback
(mf/deps change!) (mf/deps change!)
(fn [event] (fn [value]
(let [value (-> (dom/get-target-val event) (keyword))] (when (not= "multiple" value)
(reset! selected-blend-mode value)
(reset! is-option-highlighted? false)
(reset! is-preview-complete? true)
(change! :blend-mode value)))) (change! :blend-mode value))))
handle-option-enter
(mf/use-callback
(mf/deps change!)
(fn [value]
(when (not= :multiple (:blend-mode values))
(reset! is-preview-complete? false)
(reset! is-option-highlighted? true)
(change! :blend-mode value))))
handle-option-leave
(mf/use-callback
(mf/deps change!)
(fn [value]
(when (not= :multiple (:blend-mode values))
(reset! is-preview-complete? true)
(change! :blend-mode @selected-blend-mode))))
handle-opacity-change handle-opacity-change
(mf/use-callback (mf/use-callback
(mf/deps change!) (mf/deps change!)
@ -71,6 +96,11 @@
(mf/deps change!) (mf/deps change!)
(fn [_] (fn [_]
(change! :blocked false)))] (change! :blocked false)))]
(mf/use-effect
(mf/deps (:blend-mode values))
#(when (or (not @is-option-highlighted?) (and @is-option-highlighted? @is-preview-complete?))
(reset! selected-blend-mode (or (d/name (:blend-mode values)) "normal"))))
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
@ -82,33 +112,31 @@
[:div.element-set-content [:div.element-set-content
[:div.row-flex [:div.row-flex
[:select.input-select {:on-change handle-change-blend-mode [:& select
:value (d/name (:blend-mode values) "normal")} {:class "flex-grow"
:default-value @selected-blend-mode
(when (= :multiple (:blend-mode values)) :options (concat (when (= :multiple (:blend-mode values))
[:option {:value "multiple"} "--"]) [{:value "multiple" :label "--"}])
[{:value "normal" :label (tr "workspace.options.layer-options.blend-mode.normal")}
[:option {:value "normal"} (tr "workspace.options.layer-options.blend-mode.normal")] {:value "darken" :label (tr "workspace.options.layer-options.blend-mode.darken")}
{:value "multiply" :label (tr "workspace.options.layer-options.blend-mode.multiply")}
[:option {:value "darken"} (tr "workspace.options.layer-options.blend-mode.darken")] {:value "color-burn" :label (tr "workspace.options.layer-options.blend-mode.color-burn")}
[:option {:value "multiply"} (tr "workspace.options.layer-options.blend-mode.multiply")] {:value "lighten" :label (tr "workspace.options.layer-options.blend-mode.lighten")}
[:option {:value "color-burn"} (tr "workspace.options.layer-options.blend-mode.color-burn")] {:value "screen" :label (tr "workspace.options.layer-options.blend-mode.screen")}
{:value "color-dodge" :label (tr "workspace.options.layer-options.blend-mode.color-dodge")}
[:option {:value "lighten"} (tr "workspace.options.layer-options.blend-mode.lighten")] {:value "overlay" :label (tr "workspace.options.layer-options.blend-mode.overlay")}
[:option {:value "screen"} (tr "workspace.options.layer-options.blend-mode.screen")] {:value "soft-light" :label (tr "workspace.options.layer-options.blend-mode.soft-light")}
[:option {:value "color-dodge"} (tr "workspace.options.layer-options.blend-mode.color-dodge")] {:value "hard-light" :label (tr "workspace.options.layer-options.blend-mode.hard-light")}
{:value "difference" :label (tr "workspace.options.layer-options.blend-mode.difference")}
[:option {:value "overlay"} (tr "workspace.options.layer-options.blend-mode.overlay")] {:value "exclusion" :label (tr "workspace.options.layer-options.blend-mode.exclusion")}
[:option {:value "soft-light"} (tr "workspace.options.layer-options.blend-mode.soft-light")] {:value "hue" :label (tr "workspace.options.layer-options.blend-mode.hue")}
[:option {:value "hard-light"} (tr "workspace.options.layer-options.blend-mode.hard-light")] {:value "saturation" :label (tr "workspace.options.layer-options.blend-mode.saturation")}
{:value "color" :label (tr "workspace.options.layer-options.blend-mode.color")}
[:option {:value "difference"} (tr "workspace.options.layer-options.blend-mode.difference")] {:value "luminosity" :label (tr "workspace.options.layer-options.blend-mode.luminosity")}])
[:option {:value "exclusion"} (tr "workspace.options.layer-options.blend-mode.exclusion")] :on-change handle-change-blend-mode
:is-open? @is-option-highlighted?
[:option {:value "hue"} (tr "workspace.options.layer-options.blend-mode.hue")] :on-pointer-enter-option handle-option-enter
[:option {:value "saturation"} (tr "workspace.options.layer-options.blend-mode.saturation")] :on-pointer-leave-option handle-option-leave}]
[:option {:value "color"} (tr "workspace.options.layer-options.blend-mode.color")]
[:option {:value "luminosity"} (tr "workspace.options.layer-options.blend-mode.luminosity")]]
[:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"} [:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"}
[:> numeric-input {:value (-> values :opacity opacity->string) [:> numeric-input {:value (-> values :opacity opacity->string)