diff --git a/CHANGES.md b/CHANGES.md index 47921f093..ec9e3403a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,6 +19,7 @@ - Prevent adding numeric suffix to layer names when not needed [Taiga #1929](https://tree.taiga.io/project/penpot/us/1929). - Prevent deleting or moving the drafts project [Taiga #1935](https://tree.taiga.io/project/penpot/issue/1935). +- Fix problem with zoom and selection [Taiga #1919](https://tree.taiga.io/project/penpot/issue/1919) ### :arrow_up: Deps updates ### :boom: Breaking changes diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 61c2d8a0e..d00b75566 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -91,11 +91,16 @@ ;; TODO: revisit the arguments, looks like `selected` is not necessary here (defn setup-hover-shapes [page-id move-stream _selected objects transform selected ctrl? hover hover-ids zoom] - (let [query-point + (let [;; We use ref so we don't recreate the stream on a change + zoom-ref (mf/use-ref zoom) + transform-ref (mf/use-ref nil) + + query-point (mf/use-callback (mf/deps page-id) (fn [point] - (let [rect (gsh/center->rect point (/ 5 zoom) (/ 5 zoom))] + (let [zoom (mf/ref-val zoom-ref) + rect (gsh/center->rect point (/ 5 zoom) (/ 5 zoom))] (uw/ask-buffered! {:cmd :selection/query :page-id page-id @@ -103,20 +108,25 @@ :include-frames? true :reverse? true})))) ;; we want the topmost shape to be selected first - ;; We use ref so we don't recreate the stream on a change - transform-ref (mf/use-ref nil) - over-shapes-stream - (->> move-stream - ;; When transforming shapes we stop querying the worker - (rx/filter #(not (some? (mf/ref-val transform-ref)))) - (rx/switch-map query-point)) + (mf/use-memo + (fn [] + (->> move-stream + ;; When transforming shapes we stop querying the worker + (rx/filter #(not (some? (mf/ref-val transform-ref)))) + (rx/switch-map query-point)))) ] + ;; Refresh the refs on a value change + (mf/use-effect (mf/deps transform) #(mf/set-ref-val! transform-ref transform)) + (mf/use-effect + (mf/deps zoom) + #(mf/set-ref-val! zoom-ref zoom)) + (hooks/use-stream over-shapes-stream (mf/deps page-id objects selected @ctrl?)