0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

Merge pull request #1304 from penpot/bugfix

Bugfix
This commit is contained in:
Andrey Antukh 2021-10-28 17:31:40 +02:00 committed by GitHub
commit 99d173789e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 177 additions and 99 deletions

View file

@ -6,6 +6,11 @@
### :boom: Breaking changes
### :sparkles: New features
### :bug: Bugs fixed
- Fix problem with exporting before the document is saved [Taiga #2189](https://tree.taiga.io/project/penpot/issue/2189)
- Fix undo stacking when changing color from color-picker [Taiga #2191](https://tree.taiga.io/project/penpot/issue/2191)
- Fix pages dropdown in viewer [Taiga #2087](https://tree.taiga.io/project/penpot/issue/2087)
### :arrow_up: Deps updates
### :heart: Community contributions by (Thank you!)

View file

@ -6,7 +6,6 @@
height: 48px;
padding: 0 $size-4 0 55px;
position: relative;
z-index: 12;
justify-content: space-between;
a {

View file

@ -6,7 +6,7 @@
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 12;
z-index: 10;
&.invisible {
visibility: hidden;

View file

@ -201,6 +201,9 @@
(s/def ::shapes-changes-persisted
(s/keys :req-un [::revn ::cp/changes]))
(defn shapes-persited-event? [event]
(= (ptk/type event) ::changes-persisted))
(defn shapes-changes-persisted
[file-id {:keys [revn changes] :as params}]
(us/verify ::us/uuid file-id)

View file

@ -75,31 +75,33 @@
(mf/defc header-sitemap
[{:keys [project file page frame index] :as props}]
(let [project-name (:name project)
file-name (:name file)
page-name (:name page)
frame-name (:name frame)
total (count (:frames page))
toggle-thumbnails
(fn []
(st/emit! dv/toggle-thumbnails-panel))
(let [project-name (:name project)
file-name (:name file)
page-name (:name page)
frame-name (:name frame)
total (count (:frames page))
show-dropdown? (mf/use-state false)
toggle-thumbnails
(mf/use-callback
(fn []
(st/emit! dv/toggle-thumbnails-panel)))
open-dropdown
(fn []
(reset! show-dropdown? true)
(st/emit! dv/close-thumbnails-panel))
(mf/use-callback
(fn []
(reset! show-dropdown? true)))
close-dropdown
(fn []
(reset! show-dropdown? false))
(mf/use-callback
(fn []
(reset! show-dropdown? false)))
navigate-to
(fn [page-id]
(st/emit! (dv/go-to-page page-id))
(reset! show-dropdown? false))]
(mf/use-callback
(fn [page-id]
(st/emit! (dv/go-to-page page-id))
(reset! show-dropdown? false)))]
[:div.sitemap-zone {:alt (tr "viewer.header.sitemap")}
[:div.breadcrumb
@ -108,6 +110,7 @@
[:span "/"]
[:span.file-name file-name]
[:span "/"]
[:span.page-name page-name]
[:span.icon i/arrow-down]

View file

@ -9,6 +9,7 @@
[app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dc]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
@ -137,12 +138,13 @@
editing-stop (update-in [:stops editing-stop] merge changes)))
(reset! dirty? true)))
handle-click-picker (fn []
(if picking-color?
(do (modal/disallow-click-outside!)
(st/emit! (dc/stop-picker)))
(do (modal/allow-click-outside!)
(st/emit! (dc/start-picker)))))
handle-click-picker
(fn []
(if picking-color?
(do (modal/disallow-click-outside!)
(st/emit! (dc/stop-picker)))
(do (modal/allow-click-outside!)
(st/emit! (dc/start-picker)))))
handle-change-stop
(fn [offset]
@ -307,13 +309,19 @@
(case @active-tab
:ramp [:& ramp-selector {:color current-color
:disable-opacity disable-opacity
:on-change handle-change-color}]
:on-change handle-change-color
:on-start-drag #(st/emit! (dwu/start-undo-transaction))
:on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
:harmony [:& harmony-selector {:color current-color
:disable-opacity disable-opacity
:on-change handle-change-color}]
:on-change handle-change-color
:on-start-drag #(st/emit! (dwu/start-undo-transaction))
:on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
:hsva [:& hsva-selector {:color current-color
:disable-opacity disable-opacity
:on-change handle-change-color}]
:on-change handle-change-color
:on-start-drag #(st/emit! (dwu/start-undo-transaction))
:on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
nil))
[:& color-inputs {:type (if (= @active-tab :hsva) :hsv :rgb)
@ -363,7 +371,7 @@
position (or position :left)
style (calculate-position vport position x y)
handle-change (fn [new-data _shift-clicked?]
handle-change (fn [new-data]
(reset! dirty? (not= data new-data))
(reset! last-change new-data)
(when on-change

View file

@ -56,7 +56,7 @@
y (+ (/ canvas-side 2) (* comp-y (/ canvas-side 2)))]
(gpt/point x y)))
(mf/defc harmony-selector [{:keys [color disable-opacity on-change]}]
(mf/defc harmony-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
(let [canvas-ref (mf/use-ref nil)
{hue :h saturation :s value :v alpha :alpha} color
@ -84,6 +84,24 @@
:h new-hue
:s new-saturation})))
handle-start-drag
(mf/use-callback
(mf/deps on-start-drag)
(fn [event]
(dom/capture-pointer event)
(reset! dragging? true)
(when on-start-drag
(on-start-drag))))
handle-stop-drag
(mf/use-callback
(mf/deps on-finish-drag)
(fn [event]
(dom/release-pointer event)
(reset! dragging? false)
(when on-finish-drag
(on-finish-drag))))
on-change-value (fn [new-value]
(let [hex (uc/hsv->hex [hue saturation new-value])
[r g b] (uc/hex->rgb hex)]
@ -112,11 +130,8 @@
{:ref canvas-ref
:width canvas-side
:height canvas-side
:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)
:on-pointer-down (partial dom/capture-pointer)
:on-lost-pointer-capture #(do (dom/release-pointer %)
(reset! dragging? false))
:on-pointer-down handle-start-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}]
[:div.handler {:style {:pointer-events "none"
@ -133,11 +148,15 @@
:value value
:max-value 255
:vertical true
:on-change on-change-value}]
:on-change on-change-value
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
(when (not disable-opacity)
[:& slider-selector {:class "opacity"
:vertical? true
:value alpha
:max-value 1
:vertical true
:on-change on-change-opacity}])]]))
:on-change on-change-opacity
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]]))

View file

@ -10,7 +10,7 @@
[app.util.color :as uc]
[rumext.alpha :as mf]))
(mf/defc hsva-selector [{:keys [color disable-opacity on-change]}]
(mf/defc hsva-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
(let [{hue :h saturation :s value :v alpha :alpha} color
handle-change-slider (fn [key]
(fn [new-value]
@ -25,18 +25,39 @@
[:div.hsva-selector
[:span.hsva-selector-label "H"]
[:& slider-selector
{:class "hue" :max-value 360 :value hue :on-change (handle-change-slider :h)}]
{:class "hue"
:max-value 360
:value hue
:on-change (handle-change-slider :h)
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
[:span.hsva-selector-label "S"]
[:& slider-selector
{:class "saturation" :max-value 1 :value saturation :on-change (handle-change-slider :s)}]
{:class "saturation"
:max-value 1
:value saturation
:on-change (handle-change-slider :s)
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
[:span.hsva-selector-label "V"]
[:& slider-selector
{:class "value" :reverse? true :max-value 255 :value value :on-change (handle-change-slider :v)}]
{:class "value"
:reverse? true
:max-value 255
:value value
:on-change (handle-change-slider :v)
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
(when (not disable-opacity)
[:*
[:span.hsva-selector-label "A"]
[:& slider-selector
{:class "opacity" :max-value 1 :value alpha :on-change on-change-opacity}]])]))
{:class "opacity"
:max-value 1
:value alpha
:on-change on-change-opacity
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]])]))

View file

@ -13,7 +13,7 @@
[app.util.dom :as dom]
[rumext.alpha :as mf]))
(mf/defc value-saturation-selector [{:keys [saturation value on-change]}]
(mf/defc value-saturation-selector [{:keys [saturation value on-change on-start-drag on-finish-drag]}]
(let [dragging? (mf/use-state false)
calculate-pos
(fn [ev]
@ -21,13 +21,27 @@
{:keys [x y]} (-> ev dom/get-client-position)
px (math/clamp (/ (- x left) (- right left)) 0 1)
py (* 255 (- 1 (math/clamp (/ (- y top) (- bottom top)) 0 1)))]
(on-change px py)))]
(on-change px py)))
handle-start-drag
(mf/use-callback
(mf/deps on-start-drag)
(fn [event]
(dom/capture-pointer event)
(reset! dragging? true)
(on-start-drag)))
handle-stop-drag
(mf/use-callback
(mf/deps on-finish-drag)
(fn [event]
(dom/release-pointer event)
(reset! dragging? false)
(on-finish-drag)))
]
[:div.value-saturation-selector
{:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)
:on-pointer-down (partial dom/capture-pointer)
:on-lost-pointer-capture #(do (dom/release-pointer %)
(reset! dragging? false))
{:on-pointer-down handle-start-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}
[:div.handler {:style {:pointer-events "none"
@ -35,7 +49,7 @@
:top (str (* 100 (- 1 (/ value 255))) "%")}}]]))
(mf/defc ramp-selector [{:keys [color disable-opacity on-change]}]
(mf/defc ramp-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}]
(let [{hex :hex
hue :h saturation :s value :v alpha :alpha} color
@ -64,7 +78,9 @@
{:hue hue
:saturation saturation
:value value
:on-change on-change-value-saturation}]
:on-change on-change-value-saturation
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
[:div.shade-selector
[:& color-bullet {:color {:color hex
@ -72,10 +88,14 @@
[:& slider-selector {:class "hue"
:max-value 360
:value hue
:on-change on-change-hue}]
:on-change on-change-hue
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
(when (not disable-opacity)
[:& slider-selector {:class "opacity"
:max-value 1
:value alpha
:on-change on-change-opacity}])]]))
:on-change on-change-opacity
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]]))

View file

@ -12,10 +12,29 @@
[rumext.alpha :as mf]))
(mf/defc slider-selector
[{:keys [value class min-value max-value vertical? reverse? on-change]}]
[{:keys [value class min-value max-value vertical? reverse? on-change on-start-drag on-finish-drag]}]
(let [min-value (or min-value 0)
max-value (or max-value 1)
dragging? (mf/use-state false)
handle-start-drag
(mf/use-callback
(mf/deps on-start-drag)
(fn [event]
(dom/capture-pointer event)
(reset! dragging? true)
(when on-start-drag
(on-start-drag))))
handle-stop-drag
(mf/use-callback
(mf/deps on-finish-drag)
(fn [event]
(dom/release-pointer event)
(reset! dragging? false)
(when on-finish-drag
(on-finish-drag))))
calculate-pos
(fn [ev]
(when on-change
@ -32,11 +51,8 @@
[:div.slider-selector
{:class (str (if vertical? "vertical " "") class)
:on-mouse-down #(reset! dragging? true)
:on-mouse-up #(reset! dragging? false)
:on-pointer-down (partial dom/capture-pointer)
:on-lost-pointer-capture #(do (dom/release-pointer %)
(reset! dragging? false))
:on-pointer-down handle-start-drag
:on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}

View file

@ -9,6 +9,7 @@
[app.common.data :as d]
[app.main.data.messages :as dm]
[app.main.data.workspace :as udw]
[app.main.data.workspace.persistence :as dwp]
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.icons :as i]
@ -19,12 +20,22 @@
(defn request-export
[shape exports]
(rp/query! :export
{:page-id (:page-id shape)
:file-id (:file-id shape)
:object-id (:id shape)
:name (:name shape)
:exports exports}))
(let [result-stream
(->> st/stream
(rx/filter dwp/shapes-persited-event?)
(rx/take 1)
(rx/flat-map
#(rp/query!
:export
{:page-id (:page-id shape)
:file-id (:file-id shape)
:object-id (:id shape)
:name (:name shape)
:exports exports})))]
;; Force a persist before exporting otherwise the exported shape could be outdated
(st/emit! ::dwp/force-persist)
result-stream))
(mf/defc exports-menu
[{:keys [shape page-id file-id] :as props}]

View file

@ -8,7 +8,6 @@
(:require
[app.common.pages :as cp]
[app.main.data.workspace.colors :as dc]
[app.main.data.workspace.undo :as dwu]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@ -70,17 +69,7 @@
(assoc :id nil :file-id nil))]
(st/emit! (dc/change-fill ids color)))))
on-open-picker
(mf/use-callback
(mf/deps ids)
(fn [_value _opacity _id _file-id]
(st/emit! (dwu/start-undo-transaction))))
on-close-picker
(mf/use-callback
(mf/deps ids)
(fn [_value _opacity _id _file-id]
(st/emit! (dwu/commit-undo-transaction))))]
]
(if show?
[:div.element-set
@ -91,9 +80,7 @@
[:div.element-set-content
[:& color-row {:color color
:on-change on-change
:on-detach on-detach
:on-open on-open-picker
:on-close on-close-picker}]]]
:on-detach on-detach}]]]
[:div.element-set
[:div.element-set-title

View file

@ -11,7 +11,6 @@
[app.common.pages.spec :as spec]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.colors :as dc]
[app.main.data.workspace.undo :as dwu]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
@ -188,19 +187,7 @@
on-del-stroke
(fn [_]
(st/emit! (dch/update-shapes ids #(assoc % :stroke-style :none))))
on-open-picker
(mf/use-callback
(mf/deps ids)
(fn [_value _opacity _id _file-id]
(st/emit! (dwu/start-undo-transaction))))
on-close-picker
(mf/use-callback
(mf/deps ids)
(fn [_value _opacity _id _file-id]
(st/emit! (dwu/commit-undo-transaction))))]
(st/emit! (dch/update-shapes ids #(assoc % :stroke-style :none))))]
(if show-options
[:div.element-set
@ -212,9 +199,7 @@
;; Stroke Color
[:& color-row {:color current-stroke-color
:on-change handle-change-stroke-color
:on-detach handle-detach
:on-open on-open-picker
:on-close on-close-picker}]
:on-detach handle-detach}]
;; Stroke Width, Alignment & Style
[:div.row-flex

View file

@ -288,7 +288,8 @@
(-> event get-target (.setPointerCapture (.-pointerId event))))
(defn release-pointer [event]
(-> event get-target (.releasePointerCapture (.-pointerId event))))
(when (.-pointerId event)
(-> event get-target (.releasePointerCapture (.-pointerId event)))))
(defn get-root []
(query globals/document "#app"))