3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-01 02:28:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Andrey Antukh 2025-06-26 11:19:29 +02:00
commit c75a617d26
6 changed files with 80 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/dashboard/files.cljs
View file

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

3
frontend/src/app/main/ui/dashboard/grid.cljs
View file

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

15
frontend/src/app/main/ui/dashboard/inline_edition.cljs
View file

@ -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)
:value @name
:ref input-ref
:on-click on-click
:on-change on-input
[:input {:class (stl/css :element-title)
:value @name
:ref input-ref
:on-click on-click
: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]]))

3
frontend/src/app/main/ui/dashboard/projects.cljs
View file

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

110
frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
View file

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