Merge pull request #1304 from penpot/bugfix

Bugfix
2025-03-18 18:51:29 -05:00 · 2021-10-28 17:31:40 +02:00 · 2021-10-28 17:31:40 +02:00 · 99d173789e
commit 99d173789e
parent 756e654d32 ae72db8129
14 changed files with 177 additions and 99 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@ -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!)

--- a/frontend/resources/styles/main/partials/viewer-header.scss
+++ b/frontend/resources/styles/main/partials/viewer-header.scss
@ -6,7 +6,6 @@
  height: 48px;
  padding: 0 $size-4 0 55px;
  position: relative;
-  z-index: 12;
  justify-content: space-between;

  a {
--- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss
+++ b/frontend/resources/styles/main/partials/viewer-thumbnails.scss
@ -6,7 +6,7 @@
  overflow: hidden;
  display: flex;
  flex-direction: column;
-  z-index: 12;
+  z-index: 10;

  &.invisible {
    visibility: hidden;
--- a/frontend/src/app/main/data/workspace/persistence.cljs
+++ b/frontend/src/app/main/data/workspace/persistence.cljs
@ -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)
--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@ -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]

--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@ -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
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
@ -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}])]]))
--- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
@ -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}]])]))
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
@ -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}])]]))
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
@ -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 %))}

--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
@ -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}]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@ -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
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@ -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
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@ -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"))