diff --git a/CHANGES.md b/CHANGES.md index 8c92a234c..b74a11ba1 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -34,6 +34,7 @@ - Fix problem with layout not reflowing on shape deletion [Taiga #5289](https://tree.taiga.io/project/penpot/issue/5289) - Fix extra long typography names on assets and palette [Taiga #5199](https://tree.taiga.io/project/penpot/issue/5199) - Fix background-color property on inspect code [Taiga #5300](https://tree.taiga.io/project/penpot/issue/5300) +- Preview layer blend modes (by @akshay-gupta7) [Github #3235](https://github.com/penpot/penpot/pull/3235) ## 1.18.3 diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index d6177bcc1..3eb63b18c 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -2159,6 +2159,25 @@ (d/dissoc-in state [:workspace-annotations :id-for-create]))))) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Preview blend modes +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn set-preview-blend-mode + [ids blend-mode] + (ptk/reify ::set-preview-blend-mode + ptk/UpdateEvent + (update [_ state] + (reduce #(assoc-in %1 [:workspace-preview-blend %2] blend-mode) state ids)))) + +(defn unset-preview-blend-mode + [ids] + (ptk/reify ::unset-preview-blend-mode + ptk/UpdateEvent + (update [_ state] + (reduce #(update %1 :workspace-preview-blend dissoc %2) state ids)))) + + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Exports ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 6fa852010..feb0d601a 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -550,3 +550,8 @@ (def current-file-id (l/derived :current-file-id st/state)) +(def workspace-preview-blend + (l/derived :workspace-preview-blend st/state)) + +(defn workspace-preview-blend-by-id [id] + (l/derived (l/key id) workspace-preview-blend =)) diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 3550d6163..c3c117341 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -72,6 +72,9 @@ (d/read-string))] (on-pointer-leave-option value)))))] + (mf/with-effect [default-value] + (swap! state* assoc :current-value default-value)) + [:div.custom-select {:on-click open-dropdown :class class} [:span current-label] [:span.dropdown-button i/arrow-down] diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index 7e398d302..d1f767ead 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -9,6 +9,7 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.common.pages.helpers :as cph] + [app.main.refs :as refs] [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.export :as ed] @@ -53,33 +54,39 @@ children (unchecked-get props "children") pointer-events (unchecked-get props "pointer-events") disable-shadows? (unchecked-get props "disable-shadows?") + shape-id (:id shape) + + preview-blend-mode-ref + (mf/with-memo [shape-id] (refs/workspace-preview-blend-by-id shape-id)) + + blend-mode (-> (mf/deref preview-blend-mode-ref) + (or (:blend-mode shape))) type (:type shape) render-id (mf/use-id) filter-id (dm/str "filter_" render-id) styles (-> (obj/create) (obj/set! "pointerEvents" pointer-events) - (cond-> (and (:blend-mode shape) (not= (:blend-mode shape) :normal)) - (obj/set! "mixBlendMode" (d/name (:blend-mode shape))))) + (cond-> (and blend-mode (not= blend-mode :normal)) + (obj/set! "mixBlendMode" (d/name blend-mode)))) include-metadata? (mf/use-ctx ed/include-metadata-ctx) shape-without-blur (dissoc shape :blur) shape-without-shadows (assoc shape :shadow []) - filter-str (when (and (or (cph/group-shape? shape) - (cph/frame-shape? shape) - (cph/svg-raw-shape? shape)) - (not disable-shadows?)) + (cph/frame-shape? shape) + (cph/svg-raw-shape? shape)) + (not disable-shadows?)) (filters/filter-str filter-id shape)) wrapper-props (-> (obj/clone props) (obj/without ["shape" "children" "disable-shadows?"]) (obj/set! "ref" ref) - (obj/set! "id" (dm/fmt "shape-%" (:id shape))) + (obj/set! "id" (dm/fmt "shape-%" shape-id)) (obj/set! "style" styles)) wrapper-props diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 0732d6465..8b9d9667b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -8,6 +8,7 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.main.data.workspace :as dw] [app.main.data.workspace.changes :as dch] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input]] @@ -62,30 +63,27 @@ (mf/use-fn (mf/deps on-change) (fn [value] - (when (not= "multiple" value) - (swap! state* assoc - :selected-blend-mode value - :option-highlighted? false - :preview-complete? true) - (on-change :blend-mode value)))) + (swap! state* assoc + :selected-blend-mode value + :option-highlighted? false + :preview-complete? true) + (on-change :blend-mode value))) - handle-option-enter + handle-blend-mode-enter (mf/use-fn (mf/deps on-change current-blend-mode) (fn [value] - (when (not= :multiple current-blend-mode) - (swap! state* assoc - :preview-complete? false - :option-highlighted? true) - (on-change :blend-mode value)))) + (swap! state* assoc + :preview-complete? false + :option-highlighted? true) + (st/emit! (dw/set-preview-blend-mode ids value)))) - handle-option-leave + handle-blend-mode-leave (mf/use-fn (mf/deps on-change selected-blend-mode) (fn [_value] - (when (not= :multiple current-blend-mode) - (swap! state* assoc :preview-complete? true) - (on-change :blend-mode selected-blend-mode)))) + (swap! state* assoc :preview-complete? true) + (st/emit! (dw/unset-preview-blend-mode ids)))) handle-opacity-change (mf/use-fn @@ -121,7 +119,7 @@ options (mf/with-memo [current-blend-mode] (d/concat-vec - (when (= :multiple current-blend-mode) + (when (= "multiple" current-blend-mode) [{:value "multiple" :label "--"}]) [{:value "normal" :label (tr "workspace.options.layer-options.blend-mode.normal")} {:value "darken" :label (tr "workspace.options.layer-options.blend-mode.darken")} @@ -164,8 +162,8 @@ :options options :on-change handle-change-blend-mode :is-open? option-highlighted? - :on-pointer-enter-option handle-option-enter - :on-pointer-leave-option handle-option-leave}] + :on-pointer-enter-option handle-blend-mode-enter + :on-pointer-leave-option handle-blend-mode-leave}] [:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"}