Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 07:16:07 -05:00
Code Issues Activity

🐛 Fix preview layer blend modes on multiselection and avoid

Browse source 
persisting data while previewing
This commit is contained in:
Alejandro Alonso 2023-05-24 08:52:26 +02:00
parent 23f0ee9e55
commit 6eb5c75ad4
6 changed files with 59 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

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

19
frontend/src/app/main/data/workspace.cljs
View file

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

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

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

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

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

15
frontend/src/app/main/ui/shapes/shape.cljs
View file

@ -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,21 +54,27 @@
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)
@ -79,7 +86,7 @@
(-> (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

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

@ -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))))
(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))))
(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))))
(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"}