Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -76,8 +76,10 @@ on-premises instances** that want to keep up to date.
 - Fix button width [Taiga #11394](https://tree.taiga.io/project/penpot/issue/11394)
 - Fix mixed letter spacing and line height [Taiga #11178](https://tree.taiga.io/project/penpot/issue/11178)
 - Fix snap nodes shortcut [Taiga #11054](https://tree.taiga.io/project/penpot/issue/11054)
-- Fix changing a text property in a text layer does not unapply the previously applied token in the same property [Taiga #11337}(https://tree.taiga.io/project/penpot/issue/11337)
+- Fix changing a text property in a text layer does not unapply the previously applied token in the same property [Taiga #11337](https://tree.taiga.io/project/penpot/issue/11337)
 - Fix shortcut error pressing G+W from the View Mode [Taiga #11061](https://tree.taiga.io/project/penpot/issue/11061)
+- Fix entering long project name [Taiga #11417](https://tree.taiga.io/project/penpot/issue/11417)
+- Fix slow color picker [Taiga #11019](https://tree.taiga.io/project/penpot/issue/11019)
 
 ## 2.7.2
 

frontend/src/app/main/ui/dashboard/files.cljs

@@ -86,7 +86,8 @@
                        (when-not (str/empty? name)
                          (st/emit! (-> (dd/rename-project (assoc project :name name))
                                        (with-meta {::ev/origin "project"}))))
-                       (swap! local assoc :edition false)))}]
+                       (swap! local assoc :edition false)))
+           :max-length 250}]
          [:div {:class (stl/css :dashboard-title)}
           [:h1 {:on-double-click on-edit
                 :data-testid "project-title"

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -414,7 +414,8 @@
        [:div {:class (stl/css :item-info)}
         (if (and (= file-id (:file-id state)) (:edition state))
           [:& inline-edition {:content (:name file)
-                              :on-end edit}]
+                              :on-end edit
+                              :max-length 250}]
           [:h3 (:name file)])
         [:& grid-item-metadata {:modified-at (:modified-at file)}]]
 

frontend/src/app/main/ui/dashboard/inline_edition.cljs

@@ -13,7 +13,7 @@
    [rumext.v2 :as mf]))
 
 (mf/defc inline-edition
-  [{:keys [content on-end] :as props}]
+  [{:keys [content on-end max-length] :as props}]
   (let [name      (mf/use-state content)
         input-ref (mf/use-ref)
 
@@ -61,13 +61,14 @@
          (dom/select-text! node))))
 
     [:div {:class (stl/css :edit-wrapper)}
-     [:input {:class (stl/css :element-title)
+     [:input {:class       (stl/css :element-title)
-              :value @name
+              :value       @name
-              :ref input-ref
+              :ref         input-ref
-              :on-click on-click
+              :on-click    on-click
-              :on-change on-input
+              :on-change   on-input
               :on-key-down on-keyup
-              :on-blur on-blur}]
+              :on-blur     on-blur
+              :max-length  max-length}]
      [:span {:class (stl/css :close)
              :on-click on-cancel} i/close]]))
 

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -220,7 +220,8 @@
       [:div {:class (stl/css :project-name-wrapper)}
        (if (:edition @local)
          [:& inline-edition {:content (:name project)
-                             :on-end on-edit}]
+                             :on-end on-edit
+                             :max-length 250}]
          [:h2 {:on-click on-nav
                :style {:max-width (str title-width "%")}
                :class (stl/css :project-name)

frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs

@@ -50,6 +50,41 @@
                                        (obj/set! internal-state "canvas" new-canvas)
                                        new-canvas))))))))
 
+(defn process-pointer-move [viewport-node canvas canvas-image-data zoom-view-context client-x client-y]
+  (when-let [image-data (mf/ref-val canvas-image-data)]
+    (when-let [zoom-view-node (dom/get-element "picker-detail")]
+      (when-not (mf/ref-val zoom-view-context)
+        (mf/set-ref-val! zoom-view-context (.getContext zoom-view-node "2d")))
+      (let [canvas-width 260
+            canvas-height 140
+            {brx :left bry :top} (dom/get-bounding-rect viewport-node)
+
+            x (mth/floor (- client-x brx))
+            y (mth/floor (- client-y bry))
+
+            zoom-context (mf/ref-val zoom-view-context)
+            offset (* (+ (* y (unchecked-get image-data "width")) x) 4)
+            rgba (unchecked-get image-data "data")
+
+            r (obj/get rgba (+ 0 offset))
+            g (obj/get rgba (+ 1 offset))
+            b (obj/get rgba (+ 2 offset))
+            a (obj/get rgba (+ 3 offset))
+
+            sx (- x 32)
+            sy (if (cfg/check-browser? :safari) y (- y 17))
+            sw 65
+            sh 35
+            dx 0
+            dy 0
+            dw canvas-width
+            dh canvas-height]
+        (when (obj/get zoom-context "imageSmoothingEnabled")
+          (obj/set! zoom-context "imageSmoothingEnabled" false))
+        (.clearRect zoom-context 0 0 canvas-width canvas-height)
+        (.drawImage zoom-context canvas sx sy sw sh dx dy dw dh)
+        (st/emit! (dwc/pick-color [r g b a]))))))
+
 (mf/defc pixel-overlay
   {::mf/wrap-props false}
   [props]
@@ -62,7 +97,8 @@
         canvas-context    (.getContext canvas "2d" #js {:willReadFrequently true})
         canvas-image-data (mf/use-ref nil)
         zoom-view-context (mf/use-ref nil)
-
+        canvas-ready      (mf/use-state false)
+        initial-mouse-pos (mf/use-state {:x 0 :y 0})
         update-str        (rx/subject)
 
         handle-keydown
@@ -74,49 +110,6 @@
              (st/emit! (dwc/stop-picker))
              (modal/disallow-click-outside!))))
 
-        handle-pointer-move-picker
-        (mf/use-callback
-         (mf/deps viewport-node)
-         (fn [event]
-           (when-let [image-data (mf/ref-val canvas-image-data)]
-             (when-let [zoom-view-node (dom/get-element "picker-detail")]
-               (when-not (mf/ref-val zoom-view-context)
-                 (mf/set-ref-val! zoom-view-context (.getContext zoom-view-node "2d")))
-               (let [canvas-width 260
-                     canvas-height 140
-                     {brx :left bry :top} (dom/get-bounding-rect viewport-node)
-
-                     x (mth/floor (- (.-clientX event) brx))
-                     y (mth/floor (- (.-clientY event) bry))
-
-                     zoom-context (mf/ref-val zoom-view-context)
-
-                     offset (* (+ (* y (unchecked-get image-data "width")) x) 4)
-                     rgba (unchecked-get image-data "data")
-
-                     r (obj/get rgba (+ 0 offset))
-                     g (obj/get rgba (+ 1 offset))
-                     b (obj/get rgba (+ 2 offset))
-                     a (obj/get rgba (+ 3 offset))
-
-                     ;; I don't know why, but the zoom view is offset by 24px
-                     ;; instead of 25.
-                     sx (- x 32)
-
-                     ;; Safari has a different offset fro the y coord
-                     sy (if (cfg/check-browser? :safari) y (- y 17))
-                     sw 65
-                     sh 35
-                     dx 0
-                     dy 0
-                     dw canvas-width
-                     dh canvas-height]
-                 (when (obj/get zoom-context "imageSmoothingEnabled")
-                   (obj/set! zoom-context "imageSmoothingEnabled" false))
-                 (.clearRect zoom-context 0 0 canvas-width canvas-height)
-                 (.drawImage zoom-context canvas sx sy sw sh dx dy dw dh)
-                 (st/emit! (dwc/pick-color [r g b a])))))))
-
         handle-pointer-down-picker
         (mf/use-callback
          (fn [event]
@@ -152,12 +145,27 @@
                               (let [width (unchecked-get canvas "width")
                                     height (unchecked-get canvas "height")
                                     image-data (.getImageData canvas-context 0 0 width height)]
-                                (mf/set-ref-val! canvas-image-data image-data))))))))
+                                (mf/set-ref-val! canvas-image-data image-data)
+                                (reset! canvas-ready true))))))))
 
         handle-svg-change
         (mf/use-callback
          (fn []
-           (rx/push! update-str :update)))]
+           (rx/push! update-str :update)))
+
+        handle-mouse-enter
+        (mf/use-callback
+         (mf/deps viewport-node)
+         (fn [event]
+           (let [x (.-clientX event)
+                 y (.-clientY event)]
+             (reset! initial-mouse-pos {:x x
+                                        :y y}))))
+        handle-pointer-move-picker
+        (mf/use-callback
+         (mf/deps viewport-node)
+         (fn [event]
+           (process-pointer-move viewport-node canvas canvas-image-data zoom-view-context (.-clientX event) (.-clientY event))))]
 
     (when (obj/get canvas-context "imageSmoothingEnabled")
       (obj/set! canvas-context "imageSmoothingEnabled" false))
@@ -188,9 +196,17 @@
          ;; Disconnect on unmount
          #(.disconnect observer))))
 
+    (mf/use-effect
+     (mf/deps viewport-node @canvas-ready)
+     (fn []
+       (when canvas-ready
+         (let [{:keys [x y]} @initial-mouse-pos]
+           (process-pointer-move viewport-node canvas canvas-image-data zoom-view-context x y)))))
+
     [:div {:id "pixel-overlay"
            :tab-index 0
            :class (dm/str (cur/get-static "picker") " " (stl/css :pixel-overlay))
            :on-pointer-down handle-pointer-down-picker
            :on-pointer-up handle-pointer-up-picker
-           :on-pointer-move handle-pointer-move-picker}]))
+           :on-pointer-move handle-pointer-move-picker
+           :on-mouse-enter handle-mouse-enter}]))