From 4eeef41ed44495905d7c83281909a5a00c3f0521 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Mon, 13 Mar 2023 11:52:00 +0100 Subject: [PATCH 01/12] :bug: Fix flex layout gaps showing for nested items --- frontend/src/app/main/ui/measurements.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 64250d7d3..dd2d0dbc4 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -692,7 +692,7 @@ :row-gap (if flip-y true false)} objects (wsh/lookup-page-objects @st/state) - children (->> (cph/get-children objects frame-id) + children (->> (cph/get-immediate-children objects frame-id) (remove :layout-item-absolute) (remove :hidden)) From a56dc25faebeb740b5b6b6190e7b8c82430dd884 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 13 Mar 2023 13:09:45 +0100 Subject: [PATCH 02/12] :bug: Fix problems with text synchronization --- .../src/app/main/data/workspace/notifications.cljs | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 7c1900dd8..e4ea1543c 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -202,17 +202,19 @@ (fn [{:keys [type attr]}] (and (= :set type) (= attr :position-data))) - add-origin-session-id - (fn [{:keys [] :as op}] - (cond-> op - (position-data-operation? op) - (update :val with-meta {:session-id (:session-id msg)}))) + ;;add-origin-session-id + ;;(fn [{:keys [] :as op}] + ;; (cond-> op + ;; (position-data-operation? op) + ;; (update :val with-meta {:session-id (:session-id msg)}))) update-position-data (fn [change] + ;; Remove the position data from remote operations. Will be changed localy, otherwise + ;; creates a strange "out-of-sync" behaviour. (cond-> change (= :mod-obj (:type change)) - (update :operations #(mapv add-origin-session-id %)))) + (update :operations #(d/removev position-data-operation? %)))) process-page-changes (fn [[page-id changes]] From 44c35e6aee554ebe46f5c6531ef5b7de8240aa31 Mon Sep 17 00:00:00 2001 From: Aitor Date: Tue, 7 Mar 2023 16:35:42 +0100 Subject: [PATCH 03/12] :bug: Fix scaling frame proportionally --- common/src/app/common/types/modifiers.cljc | 25 +++++++++++-------- .../app/main/data/workspace/transforms.cljs | 9 ++++--- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/common/src/app/common/types/modifiers.cljc b/common/src/app/common/types/modifiers.cljc index 5097550e9..3673eba1d 100644 --- a/common/src/app/common/types/modifiers.cljc +++ b/common/src/app/common/types/modifiers.cljc @@ -635,28 +635,32 @@ matrix)))] (recur matrix (next modifiers))))))) +(defn transform-text-node [value attrs] + (let [font-size (-> (get attrs :font-size 14) + (d/parse-double) + (* value) + (str))] + (d/txt-merge attrs {:font-size font-size}))) + +(defn update-text-content + [shape scale-text-content value] + (update shape :content scale-text-content value)) + (defn apply-structure-modifiers "Apply structure changes to a shape" [shape modifiers] (letfn [(scale-text-content [content value] - (->> content (txt/transform-nodes txt/is-text-node? - (fn [attrs] - (let [font-size (-> (get attrs :font-size 14) - (d/parse-double) - (* value) - (str)) ] - (d/txt-merge attrs {:font-size font-size})))))) + (partial transform-text-node value)))) (apply-scale-content [shape value] - (cond-> shape (cph/text-shape? shape) - (update :content scale-text-content value) + (update-text-content scale-text-content value) (cph/rect-shape? shape) (gsc/update-corners-scale value) @@ -666,7 +670,7 @@ (d/not-empty? (:shadow shape)) (gse/update-shadows-scale value) - + (some? (:blur shape)) (gse/update-blur-scale value)))] @@ -698,7 +702,6 @@ (let [value (dm/get-prop operation :value)] (update shape :shapes remove-children value)) - :scale-content (let [value (dm/get-prop operation :value)] (apply-scale-content shape value)) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 5b22c724f..88817b3be 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -104,7 +104,8 @@ (defn start-resize "Enter mouse resize mode, until mouse button is released." [handler ids shape] - (letfn [(resize [shape initial layout [point lock? center? point-snap]] + (letfn [(resize + [shape initial layout [point lock? center? point-snap]] (let [{:keys [width height]} (:selrect shape) {:keys [rotation]} shape @@ -192,7 +193,7 @@ (ctm/scale-content (:x scalev)))) modif-tree (dwm/create-modif-tree ids modifiers)] - (rx/of (dwm/set-modifiers modif-tree)))) + (rx/of (dwm/set-modifiers modif-tree (and (= :frame (:type shape)) scale-text))))) ;; Unifies the instantaneous proportion lock modifier ;; activated by Shift key and the shapes own proportion @@ -209,7 +210,7 @@ ptk/WatchEvent (watch [_ state stream] (let [initial-position @ms/mouse-position - stoper (rx/filter ms/mouse-up? stream) + stopper (rx/filter ms/mouse-up? stream) layout (:workspace-layout state) page-id (:current-page-id state) focus (:workspace-focus-selected state) @@ -226,7 +227,7 @@ (->> (snap/closest-snap-point page-id resizing-shapes objects layout zoom focus point) (rx/map #(conj current %))))) (rx/mapcat (partial resize shape initial-position layout)) - (rx/take-until stoper)) + (rx/take-until stopper)) (rx/of (dwm/apply-modifiers) (finish-transform)))))))) From 3a2e1b5c94373677a6b463387d06137f1f5e916a Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 8 Mar 2023 16:57:09 +0100 Subject: [PATCH 04/12] :sparkles: Adapt scale to flex elements --- .../app/common/geom/shapes/constraints.cljc | 16 ++++++------- common/src/app/common/types/modifiers.cljc | 9 ++++++- common/src/app/common/types/shape/layout.cljc | 24 +++++++++++++++++++ .../app/main/data/workspace/modifiers.cljs | 12 +++++++--- .../app/main/data/workspace/transforms.cljs | 2 +- 5 files changed, 50 insertions(+), 13 deletions(-) diff --git a/common/src/app/common/geom/shapes/constraints.cljc b/common/src/app/common/geom/shapes/constraints.cljc index 82ed2097b..6a9885e69 100644 --- a/common/src/app/common/geom/shapes/constraints.cljc +++ b/common/src/app/common/geom/shapes/constraints.cljc @@ -288,25 +288,25 @@ constraints-h (cond + ignore-constraints + :scale + (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child))) :left - (not ignore-constraints) - (:constraints-h child (default-constraints-h child)) - :else - :scale) + (:constraints-h child (default-constraints-h child))) constraints-v (cond + ignore-constraints + :scale + (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child))) :top - (not ignore-constraints) - (:constraints-v child (default-constraints-v child)) - :else - :scale)] + (:constraints-v child (default-constraints-v child)))] (if (and (= :scale constraints-h) (= :scale constraints-v)) modifiers diff --git a/common/src/app/common/types/modifiers.cljc b/common/src/app/common/types/modifiers.cljc index 3673eba1d..1884ff043 100644 --- a/common/src/app/common/types/modifiers.cljc +++ b/common/src/app/common/types/modifiers.cljc @@ -19,6 +19,7 @@ [app.common.pages.helpers :as cph] [app.common.spec :as us] [app.common.text :as txt] + [app.common.types.shape.layout :as ctl] #?(:cljs [cljs.core :as c] :clj [clojure.core :as c]))) @@ -672,7 +673,13 @@ (gse/update-shadows-scale value) (some? (:blur shape)) - (gse/update-blur-scale value)))] + (gse/update-blur-scale value) + + (ctl/flex-layout? shape) + (ctl/update-flex-scale value) + + :always + (ctl/update-flex-child value)))] (let [remove-children (fn [shapes children-to-remove] diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index c669aae62..6ae3ca0ed 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -497,6 +497,30 @@ :layout-item-align-self :layout-item-absolute :layout-item-z-index)) + +(defn update-flex-scale + [shape scale] + (-> shape + (d/update-in-when [:layout-gap :row-gap] * scale) + (d/update-in-when [:layout-gap :column-gap] * scale) + (d/update-in-when [:layout-padding :p1] * scale) + (d/update-in-when [:layout-padding :p2] * scale) + (d/update-in-when [:layout-padding :p3] * scale) + (d/update-in-when [:layout-padding :p4] * scale))) + +(defn update-flex-child + [shape scale] + (-> shape + (d/update-when :layout-item-max-h * scale) + (d/update-when :layout-item-min-h * scale) + (d/update-when :layout-item-max-w * scale) + (d/update-when :layout-item-min-w * scale) + (d/update-in-when [:layout-item-margin :m1] * scale) + (d/update-in-when [:layout-item-margin :m2] * scale) + (d/update-in-when [:layout-item-margin :m3] * scale) + (d/update-in-when [:layout-item-margin :m4] * scale))) + + (declare assign-cells) (def grid-cell-defaults diff --git a/frontend/src/app/main/data/workspace/modifiers.cljs b/frontend/src/app/main/data/workspace/modifiers.cljs index fa5935607..8c3a6dfca 100644 --- a/frontend/src/app/main/data/workspace/modifiers.cljs +++ b/frontend/src/app/main/data/workspace/modifiers.cljs @@ -438,14 +438,20 @@ :flip-x :flip-y :grow-type - :layout-item-h-sizing - :layout-item-v-sizing + :position-data + :layout-gap :layout-padding + :layout-item-h-sizing + :layout-item-margin + :layout-item-max-h + :layout-item-max-w + :layout-item-min-h + :layout-item-min-w + :layout-item-v-sizing :layout-padding-type :layout-gap :layout-item-margin :layout-item-margin-type - :position-data ]}) ;; We've applied the text-modifier so we can dissoc the temporary data (fn [state] diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 88817b3be..2d07e0766 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -193,7 +193,7 @@ (ctm/scale-content (:x scalev)))) modif-tree (dwm/create-modif-tree ids modifiers)] - (rx/of (dwm/set-modifiers modif-tree (and (= :frame (:type shape)) scale-text))))) + (rx/of (dwm/set-modifiers modif-tree scale-text)))) ;; Unifies the instantaneous proportion lock modifier ;; activated by Shift key and the shapes own proportion From aa4a3ef940be5b1dcc11cc828bbae93563f6750e Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 14 Mar 2023 11:01:26 +0100 Subject: [PATCH 05/12] :bug: Fix apply structure modifiers to children --- common/src/app/common/geom/shapes/modifiers.cljc | 14 ++++++++++++-- common/src/app/common/types/modifiers.cljc | 8 ++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/common/src/app/common/geom/shapes/modifiers.cljc b/common/src/app/common/geom/shapes/modifiers.cljc index 62a7e784d..582d2a404 100644 --- a/common/src/app/common/geom/shapes/modifiers.cljc +++ b/common/src/app/common/geom/shapes/modifiers.cljc @@ -322,10 +322,20 @@ (defn- apply-structure-modifiers [objects modif-tree] - (letfn [(apply-shape [objects [id {:keys [modifiers]}]] + (letfn [(update-children-structure-modifiers + [objects ids modifiers] + (reduce #(update %1 %2 ctm/apply-structure-modifiers modifiers) objects ids)) + + (apply-shape [objects [id {:keys [modifiers]}]] (cond-> objects (ctm/has-structure? modifiers) - (update id ctm/apply-structure-modifiers modifiers)))] + (update id ctm/apply-structure-modifiers modifiers) + + (and (ctm/has-structure? modifiers) + (ctm/has-structure-child? modifiers)) + (update-children-structure-modifiers + (cph/get-children-ids objects id) + (ctm/select-child-structre-modifiers modifiers))))] (reduce apply-shape objects modif-tree))) (defn merge-modif-tree diff --git a/common/src/app/common/types/modifiers.cljc b/common/src/app/common/types/modifiers.cljc index 1884ff043..5a76d4100 100644 --- a/common/src/app/common/types/modifiers.cljc +++ b/common/src/app/common/types/modifiers.cljc @@ -543,6 +543,10 @@ (or (d/not-empty? structure-parent) (d/not-empty? structure-child))) +(defn has-structure-child? + [modifiers] + (d/not-empty? (dm/get-prop modifiers :structure-child))) + ;; Extract subsets of modifiers (defn select-child @@ -565,6 +569,10 @@ [modifiers] (-> modifiers select-child select-geometry)) +(defn select-child-structre-modifiers + [modifiers] + (-> modifiers select-child select-structure)) + (defn added-children-frames "Returns the frames that have an 'add-children' operation" [modif-tree] From b9559d99da014f2701ed64021df2c93e61b892e9 Mon Sep 17 00:00:00 2001 From: Aitor Date: Tue, 14 Mar 2023 11:24:15 +0100 Subject: [PATCH 06/12] :sparkles: Improve scale matrix computation --- common/src/app/common/geom/matrix.cljc | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/common/src/app/common/geom/matrix.cljc b/common/src/app/common/geom/matrix.cljc index 01ee53c9d..2e552664c 100644 --- a/common/src/app/common/geom/matrix.cljc +++ b/common/src/app/common/geom/matrix.cljc @@ -187,10 +187,11 @@ (defn scale-matrix ([pt center] - (-> (matrix) - (multiply! (translate-matrix center)) - (multiply! (scale-matrix pt)) - (multiply! (translate-matrix (gpt/negate center))))) + (let [sx (dm/get-prop pt :x) + sy (dm/get-prop pt :y) + cx (dm/get-prop center :x) + cy (dm/get-prop center :y)] + (Matrix. sx 0 0 sy (- cx (* cx sx)) (- cy (* cy sy))))) ([pt] (assert (gpt/point? pt)) (Matrix. (dm/get-prop pt :x) 0 0 (dm/get-prop pt :y) 0 0))) From 538a05b3597d00b197c37e1cea574b901c16312a Mon Sep 17 00:00:00 2001 From: Aitor Date: Tue, 14 Mar 2023 13:05:52 +0100 Subject: [PATCH 07/12] :sparkles: improve rotate matrix --- common/src/app/common/geom/matrix.cljc | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/common/src/app/common/geom/matrix.cljc b/common/src/app/common/geom/matrix.cljc index 2e552664c..6e9c1d46f 100644 --- a/common/src/app/common/geom/matrix.cljc +++ b/common/src/app/common/geom/matrix.cljc @@ -198,10 +198,17 @@ (defn rotate-matrix ([angle point] - (-> (matrix) - (multiply! (translate-matrix point)) - (multiply! (rotate-matrix angle)) - (multiply! (translate-matrix (gpt/negate point))))) + (let [cx (dm/get-prop point :x) + cy (dm/get-prop point :y) + nx (- cx) + ny (- cy) + a (mth/radians angle) + c (mth/cos a) + s (mth/sin a) + ns (- s) + tx (+ (* c nx) (* ns ny) cx) + ty (+ (* s nx) (* c ny) cy)] + (Matrix. c s ns c tx ty))) ([angle] (let [a (mth/radians angle)] (Matrix. (mth/cos a) From dad88cb42e3c1d442f369a4a6b8e168dffc37a29 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 13 Mar 2023 15:23:55 +0100 Subject: [PATCH 08/12] :bug: Fix close colorpicker on Firefox when mouse-up is outside the picker --- CHANGES.md | 1 + frontend/src/app/main/ui/modal.cljs | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index a45658970..de9102c89 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -27,6 +27,7 @@ - Fix unlink library color when blur color picker input [#3026](https://github.com/penpot/penpot/issues/3026) - Fix snap pixel when moving path points on high zoom [#2930](https://github.com/penpot/penpot/issues/2930) - Fix shortcuts for zoom now take into account the mouse position [#2924](https://github.com/penpot/penpot/issues/2924) +- Fix close colorpicker on Firefox when mouse-up is outside the picker [#2911](https://github.com/penpot/penpot/issues/2911) ### :heart: Community contributions by (Thank you!) - To @ondrejkonec: for contributing to the code with: diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index 47cca1645..aa1b752a9 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -66,7 +66,7 @@ (events/listen js/document EventType.KEYDOWN handle-keydown) ;; Changing to js/document breaks the color picker - (events/listen (dom/get-root) EventType.CLICK handle-click-outside) + (events/listen (dom/get-root) EventType.MOUSEDOWN handle-click-outside) (events/listen js/document EventType.CONTEXTMENU handle-click-outside)]] #(doseq [key keys] From 5bd4be19508fbf46db8406be02d985cfaf7ee284 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 13 Mar 2023 15:24:01 +0100 Subject: [PATCH 09/12] :bug: No select frames without fill should happen only on ctrl click --- frontend/src/app/main/ui/workspace/viewport/hooks.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 4ececf323..f911a65a8 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -253,7 +253,7 @@ (->> ids (remove remove-id?) (remove (partial cph/hidden-parent? objects)) - (remove no-fill-nested-frames?) + (remove #(and mod? (no-fill-nested-frames? %))) (filter #(or (empty? focus) (cp/is-in-focus? objects focus %))) (first) (get objects))] From 2c6513ac85ab5eb7286a02bc04dce28b92cc0e78 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 14 Mar 2023 15:42:24 +0100 Subject: [PATCH 10/12] :bug: Fix problems with touch devices and Wacom tablets --- CHANGES.md | 1 + frontend/src/app/main/ui/comments.cljs | 14 ++--- .../app/main/ui/components/color_input.cljs | 1 - .../app/main/ui/components/numeric_input.cljs | 1 - frontend/src/app/main/ui/hooks/resize.cljs | 4 +- frontend/src/app/main/ui/measurements.cljs | 54 +++++++++--------- frontend/src/app/main/ui/modal.cljs | 2 +- .../app/main/ui/viewer/inspect/render.cljs | 4 +- frontend/src/app/main/ui/viewer/shapes.cljs | 32 +++++------ frontend/src/app/main/ui/workspace.cljs | 3 +- .../app/main/ui/workspace/colorpalette.cljs | 4 +- .../app/main/ui/workspace/colorpicker.cljs | 3 +- .../ui/workspace/colorpicker/harmony.cljs | 2 +- .../main/ui/workspace/colorpicker/ramp.cljs | 2 +- .../colorpicker/slider_selector.cljs | 2 +- .../src/app/main/ui/workspace/effects.cljs | 2 +- .../main/ui/workspace/shapes/path/editor.cljs | 16 +++--- .../main/ui/workspace/shapes/text/editor.cljs | 4 +- .../src/app/main/ui/workspace/sidebar.cljs | 4 +- .../main/ui/workspace/sidebar/history.cljs | 4 +- .../sidebar/options/menus/typography.cljs | 4 +- .../sidebar/options/rows/color_row.cljs | 4 +- .../main/ui/workspace/sidebar/sitemap.cljs | 4 +- .../app/main/ui/workspace/textpalette.cljs | 4 +- .../src/app/main/ui/workspace/viewport.cljs | 20 +++---- .../main/ui/workspace/viewport/actions.cljs | 56 ++++++++----------- .../main/ui/workspace/viewport/gradients.cljs | 26 ++++----- .../viewport/grid_layout_editor.cljs | 4 +- .../main/ui/workspace/viewport/guides.cljs | 12 ++-- .../app/main/ui/workspace/viewport/hooks.cljs | 15 +---- .../ui/workspace/viewport/interactions.cljs | 14 ++--- .../ui/workspace/viewport/pixel_overlay.cljs | 12 ++-- .../ui/workspace/viewport/scroll_bars.cljs | 18 +++--- .../main/ui/workspace/viewport/selection.cljs | 10 ++-- .../main/ui/workspace/viewport/widgets.cljs | 8 +-- 35 files changed, 173 insertions(+), 197 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index de9102c89..05c503720 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -28,6 +28,7 @@ - Fix snap pixel when moving path points on high zoom [#2930](https://github.com/penpot/penpot/issues/2930) - Fix shortcuts for zoom now take into account the mouse position [#2924](https://github.com/penpot/penpot/issues/2924) - Fix close colorpicker on Firefox when mouse-up is outside the picker [#2911](https://github.com/penpot/penpot/issues/2911) +- Fix problems with touch devices and Wacom tablets [#2216](https://github.com/penpot/penpot/issues/2216) ### :heart: Community contributions by (Thank you!) - To @ondrejkonec: for contributing to the code with: diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index ea2a00ab9..c83cf0310 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -377,7 +377,7 @@ (swap! state assoc :new-position-x nil) (swap! state assoc :new-position-y nil))) - on-mouse-move + on-pointer-move (mf/use-callback (mf/deps position zoom) (fn [event] @@ -392,7 +392,7 @@ {:on-pointer-down on-pointer-down :on-pointer-up on-pointer-up - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :on-lost-pointer-capture on-lost-pointer-capture :state state})) @@ -408,7 +408,7 @@ {:keys [on-pointer-down on-pointer-up - on-mouse-move + on-pointer-move state on-lost-pointer-capture]} (use-buble zoom thread) @@ -438,14 +438,14 @@ (and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?)))) (st/emit! (dcm/open-thread thread)))))) - on-mouse-move* + on-pointer-move* (mf/use-callback - (mf/deps origin drag? on-mouse-move) + (mf/deps origin drag? on-pointer-move) (fn [event] (when (not= origin :viewer) (mf/set-ref-val! drag? true) (dom/stop-propagation event) - (on-mouse-move event)))) + (on-pointer-move event)))) on-click* (mf/use-callback @@ -460,7 +460,7 @@ :left (str pos-x "px")} :on-pointer-down on-pointer-down* :on-pointer-up on-pointer-up* - :on-mouse-move on-mouse-move* + :on-pointer-move on-pointer-move* :on-click on-click* :on-lost-pointer-capture on-lost-pointer-capture :class (dom/classnames diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index eed2d2648..415472f6f 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -138,7 +138,6 @@ (mf/use-layout-effect (fn [] (let [keys [(events/listen globals/window EventType.POINTERDOWN on-click) - (events/listen globals/window EventType.MOUSEDOWN on-click) (events/listen globals/window EventType.CLICK on-click)]] #(doseq [key keys] (events/unlistenByKey key))))) diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index ad772f1ac..9b9034979 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -233,7 +233,6 @@ (mf/use-layout-effect (fn [] (let [keys [(events/listen globals/window EventType.POINTERDOWN on-click) - (events/listen globals/window EventType.MOUSEDOWN on-click) (events/listen globals/window EventType.CLICK on-click)]] #(doseq [key keys] (events/unlistenByKey key))))) diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs index 6c1ebe7b7..b01a7de45 100644 --- a/frontend/src/app/main/ui/hooks/resize.cljs +++ b/frontend/src/app/main/ui/hooks/resize.cljs @@ -52,7 +52,7 @@ (mf/set-ref-val! start-ref nil) (set! last-resize-type nil))) - on-mouse-move + on-pointer-move (mf/use-callback (mf/deps min-val max-val negate?) (fn [event] @@ -68,7 +68,7 @@ (swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))] {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :parent-ref parent-ref :size @size-state})) diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index dd2d0dbc4..8d9706a6c 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -297,7 +297,7 @@ (fmt/format-number (or value 0))]]) -(mf/defc padding-display [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-mouse-enter on-mouse-leave +(mf/defc padding-display [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter on-pointer-leave rect-data hover? selected? mouse-pos hover-value]}] (let [resizing? (mf/use-var false) start (mf/use-var nil) @@ -324,7 +324,7 @@ (reset! original-value 0) (st/emit! (dwm/apply-modifiers)))) - on-mouse-move + on-pointer-move (mf/use-callback (mf/deps frame-id padding-num padding) (fn [event] @@ -354,11 +354,11 @@ :y (:y rect-data) :width (:width rect-data) :height (:height rect-data) - :on-mouse-enter on-mouse-enter - :on-mouse-leave on-mouse-leave + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :style {:fill (if (or hover? selected?) distance-color "none") :cursor (when (or hover? selected?) (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) @@ -375,10 +375,10 @@ hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?) padding (:layout-padding frame) {:keys [width height x1 x2 y1 y2]} (:selrect frame) - on-mouse-enter (fn [hover-type val] + on-pointer-enter (fn [hover-type val] (reset! hover hover-type) (reset! hover-value val)) - on-mouse-leave #(reset! hover nil) + on-pointer-leave #(reset! hover nil) pill-width (/ flex-display-pill-width zoom) pill-height (/ flex-display-pill-height zoom) hover? #(or hover-all? @@ -442,8 +442,8 @@ :mouse-pos mouse-pos :hover-value hover-value :padding-num padding-num - :on-mouse-enter (partial on-mouse-enter padding-num (get padding padding-num)) - :on-mouse-leave on-mouse-leave + :on-pointer-enter (partial on-pointer-enter padding-num (get padding padding-num)) + :on-pointer-leave on-pointer-leave :hover? (hover? padding-num) :selected? (get paddings-selected padding-num) :rect-data rect-data}]) @@ -457,7 +457,7 @@ :y (- (:y @mouse-pos) pill-width) :value @hover-value}])])) -(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-mouse-enter on-mouse-leave +(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-pointer-enter on-pointer-leave rect-data hover? selected? mouse-pos hover-value]}] (let [resizing? (mf/use-var false) start (mf/use-var nil) @@ -484,7 +484,7 @@ (reset! original-value 0) (st/emit! (dwm/apply-modifiers)))) - on-mouse-move + on-pointer-move (mf/use-callback (mf/deps shape-id margin-num margin) (fn [event] @@ -512,11 +512,11 @@ :y (:y rect-data) :width (:width rect-data) :height (:height rect-data) - :on-mouse-enter on-mouse-enter - :on-mouse-leave on-mouse-leave + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :style {:fill (if (or hover? selected?) warning-color "none") :cursor (when (or hover? selected?) (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) @@ -535,10 +535,10 @@ hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?) margin (:layout-item-margin shape) {:keys [width height x1 x2 y1 y2]} (:selrect shape) - on-mouse-enter (fn [hover-type val] + on-pointer-enter (fn [hover-type val] (reset! hover hover-type) (reset! hover-value val)) - on-mouse-leave #(reset! hover nil) + on-pointer-leave #(reset! hover nil) hover? #(or hover-all? (and (or (= % :m1) (= % :m3)) hover-v?) (and (or (= % :m2) (= % :m4)) hover-h?) @@ -591,8 +591,8 @@ :hover-h? hover-h? :margin-num margin-num :margin margin - :on-mouse-enter (partial on-mouse-enter margin-num (get margin margin-num)) - :on-mouse-leave on-mouse-leave + :on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num)) + :on-pointer-leave on-pointer-leave :rect-data rect-data :hover? (hover? margin-num) :selected? (get margins-selected margin-num) @@ -609,7 +609,7 @@ :y (- (:y @mouse-pos) pill-width) :value @hover-value}])])) -(mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-mouse-enter on-mouse-leave +(mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave rect-data hover? selected? mouse-pos hover-value]}] (let [resizing (mf/use-var nil) start (mf/use-var nil) @@ -636,7 +636,7 @@ (reset! original-value 0) (st/emit! (dwm/apply-modifiers)))) - on-mouse-move + on-pointer-move (mf/use-callback (mf/deps frame-id gap-type gap) (fn [event] @@ -657,11 +657,11 @@ :y (:y rect-data) :width (:width rect-data) :height (:height rect-data) - :on-mouse-enter on-mouse-enter - :on-mouse-leave on-mouse-leave + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :style {:fill (if (or hover? selected?) distance-color "none") :cursor (when (or hover? selected?) (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) @@ -683,11 +683,11 @@ padding (:layout-padding frame) gap (:layout-gap frame) {:keys [width height x1 y1]} (:selrect frame) - on-mouse-enter (fn [hover-type val] + on-pointer-enter (fn [hover-type val] (reset! hover hover-type) (reset! hover-value val)) - on-mouse-leave #(reset! hover nil) + on-pointer-leave #(reset! hover nil) negate {:column-gap (if flip-x true false) :row-gap (if flip-y true false)} @@ -833,8 +833,8 @@ :zoom zoom :gap-type gap-type :gap gap - :on-mouse-enter (partial on-mouse-enter gap-type (get gap gap-type)) - :on-mouse-leave on-mouse-leave + :on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type)) + :on-pointer-leave on-pointer-leave :rect-data display-item :hover? (= @hover gap-type) :selected? (= gap-selected gap-type) diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index aa1b752a9..94831f951 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -66,7 +66,7 @@ (events/listen js/document EventType.KEYDOWN handle-keydown) ;; Changing to js/document breaks the color picker - (events/listen (dom/get-root) EventType.MOUSEDOWN handle-click-outside) + (events/listen (dom/get-root) EventType.POINTERDOWN handle-click-outside) (events/listen js/document EventType.CONTEXTMENU handle-click-outside)]] #(doseq [key keys] diff --git a/frontend/src/app/main/ui/viewer/inspect/render.cljs b/frontend/src/app/main/ui/viewer/inspect/render.cljs index 1c7053b7d..da8e79d80 100644 --- a/frontend/src/app/main/ui/viewer/inspect/render.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/render.cljs @@ -64,8 +64,8 @@ (if render-wrapper? [:> shape-container {:shape shape - :on-mouse-enter (handle-hover-shape shape true) - :on-mouse-leave (handle-hover-shape shape false) + :on-pointer-enter (handle-hover-shape shape true) + :on-pointer-leave (handle-hover-shape shape false) :on-click (select-shape shape)} [:& component {:shape shape :frame frame diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index ccd997a54..ffc33bfbe 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -169,7 +169,7 @@ (:animation interaction))))) nil)) -(defn- on-mouse-down +(defn- on-pointer-down [event shape base-frame frame-offset objects overlays] (let [interactions (->> (:interactions shape) (filter #(or (= (:event-type %) :click) @@ -179,7 +179,7 @@ (doseq [interaction interactions] (activate-interaction interaction shape base-frame frame-offset objects overlays))))) -(defn- on-mouse-up +(defn- on-pointer-up [event shape base-frame frame-offset objects overlays] (let [interactions (->> (:interactions shape) (filter #(= (:event-type %) :mouse-press)))] @@ -188,7 +188,7 @@ (doseq [interaction interactions] (deactivate-interaction interaction shape base-frame frame-offset objects overlays))))) -(defn- on-mouse-enter +(defn- on-pointer-enter [event shape base-frame frame-offset objects overlays] (let [interactions (->> (:interactions shape) (filter #(or (= (:event-type %) :mouse-enter) @@ -198,7 +198,7 @@ (doseq [interaction interactions] (activate-interaction interaction shape base-frame frame-offset objects overlays))))) -(defn- on-mouse-leave +(defn- on-pointer-leave [event shape base-frame frame-offset objects overlays] (let [interactions (->> (:interactions shape) (filter #(= (:event-type %) :mouse-leave))) @@ -262,21 +262,21 @@ svg-element? (and (= :svg-raw (:type shape)) (not= :svg (get-in shape [:content :tag]))) - on-mouse-down + on-pointer-down (mf/use-fn (mf/deps shape base-frame frame-offset objects) - #(on-mouse-down % shape base-frame frame-offset objects overlays)) + #(on-pointer-down % shape base-frame frame-offset objects overlays)) - on-mouse-up + on-pointer-up (mf/use-fn (mf/deps shape base-frame frame-offset objects) - #(on-mouse-up % shape base-frame frame-offset objects overlays)) + #(on-pointer-up % shape base-frame frame-offset objects overlays)) - on-mouse-enter + on-pointer-enter (mf/use-fn (mf/deps shape base-frame frame-offset objects) - #(on-mouse-enter % shape base-frame frame-offset objects overlays)) + #(on-pointer-enter % shape base-frame frame-offset objects overlays)) - on-mouse-leave + on-pointer-leave (mf/use-fn (mf/deps shape base-frame frame-offset objects) - #(on-mouse-leave % shape base-frame frame-offset objects overlays))] + #(on-pointer-leave % shape base-frame frame-offset objects overlays))] (mf/with-effect [] @@ -286,10 +286,10 @@ (if-not svg-element? [:> shape-container {:shape shape :cursor (when (ctsi/actionable? interactions) "pointer") - :on-mouse-down on-mouse-down - :on-mouse-up on-mouse-up - :on-mouse-enter on-mouse-enter - :on-mouse-leave on-mouse-leave} + :on-pointer-down on-pointer-down + :on-pointer-up on-pointer-up + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave} [:& component {:shape shape :frame frame diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index fa0f55059..d9be83a3a 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -164,7 +164,8 @@ [:& (mf/provider ctx/current-page-id) {:value page-id} [:& (mf/provider ctx/components-v2) {:value components-v2} [:& (mf/provider ctx/workspace-read-only?) {:value workspace-read-only?} - [:section#workspace {:style {:background-color background-color}} + [:section#workspace {:style {:background-color background-color + :touch-action "none"}} (when (not (:hide-ui layout)) [:& header {:file file :page-id page-id diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index 12507ef39..5d64b9a99 100644 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs @@ -49,7 +49,7 @@ container (mf/use-ref nil) - {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} + {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} (use-resize-hook :palette 72 54 80 :y true :bottom) on-left-arrow-click @@ -113,7 +113,7 @@ "--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}} [:div.resize-area {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move}] + :on-pointer-move on-pointer-move}] [:& dropdown {:show (:show-menu @state) :on-close #(swap! state assoc :show-menu false)} [:ul.workspace-context-menu.palette-menu diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 9f8ee7e73..77d54ab03 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -191,7 +191,8 @@ :h h :s s :v v :alpha (/ alpha 255)})))) - [:div.colorpicker {:ref node-ref} + [:div.colorpicker {:ref node-ref + :style {:touch-action "none"}} [:div.colorpicker-content [:div.top-actions [:button.picker-btn diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs index d9c8609a5..119faa933 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs @@ -134,7 +134,7 @@ :on-pointer-up handle-stop-drag :on-lost-pointer-capture handle-stop-drag :on-click calculate-pos - :on-mouse-move #(when @dragging? (calculate-pos %))}] + :on-pointer-move #(when @dragging? (calculate-pos %))}] [:div.handler {:style {:pointer-events "none" :left (:x pos-current) :top (:y pos-current)}}] diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs index 63c7b467c..0a839324a 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs @@ -44,7 +44,7 @@ :on-pointer-up handle-stop-drag :on-lost-pointer-capture handle-stop-drag :on-click calculate-pos - :on-mouse-move #(when @dragging? (calculate-pos %))} + :on-pointer-move #(when @dragging? (calculate-pos %))} [:div.handler {:style {:pointer-events "none" :left (str (* 100 saturation) "%") :top (str (* 100 (- 1 (/ value 255))) "%")}}]])) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs index 83c56c1b6..7b5af5bae 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs @@ -55,7 +55,7 @@ :on-pointer-up handle-stop-drag :on-lost-pointer-capture handle-stop-drag :on-click calculate-pos - :on-mouse-move #(when @dragging? (calculate-pos %))} + :on-pointer-move #(when @dragging? (calculate-pos %))} (let [value-percent (* (/ (- value min-value) (- max-value min-value)) 100) diff --git a/frontend/src/app/main/ui/workspace/effects.cljs b/frontend/src/app/main/ui/workspace/effects.cljs index a124dfb45..8210ef068 100644 --- a/frontend/src/app/main/ui/workspace/effects.cljs +++ b/frontend/src/app/main/ui/workspace/effects.cljs @@ -28,7 +28,7 @@ (fn [] (st/emit! (dws/change-hover-state id false))))) -(defn use-mouse-down +(defn use-pointer-down [{:keys [id type blocked]}] (mf/use-callback (mf/deps id type blocked) diff --git a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs index 9ee12f976..8eddab085 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs @@ -51,7 +51,7 @@ (fn [_] (st/emit! (drp/path-pointer-leave position)))) - on-mouse-down + on-pointer-down (fn [event] (dom/stop-propagation event) (dom/prevent-default event) @@ -95,9 +95,9 @@ [:circle {:cx x :cy y :r (/ point-radius-active-area zoom) - :on-mouse-down on-mouse-down - :on-mouse-enter on-enter - :on-mouse-leave on-leave + :on-pointer-down on-pointer-down + :on-pointer-enter on-enter + :on-pointer-leave on-leave :pointer-events (when-not preview? "visible") :style {:cursor (cond (= edit-mode :draw) cur/pen-node @@ -116,7 +116,7 @@ (fn [_] (st/emit! (drp/path-handler-leave index prefix))) - on-mouse-down + on-pointer-down (fn [event] (dom/stop-propagation event) (dom/prevent-default event) @@ -157,9 +157,9 @@ [:circle {:cx x :cy y :r (/ point-radius-active-area zoom) - :on-mouse-down on-mouse-down - :on-mouse-enter on-enter - :on-mouse-leave on-leave + :on-pointer-down on-pointer-down + :on-pointer-enter on-enter + :on-pointer-leave on-leave :style {:cursor (when (= edit-mode :move) cur/pointer-move) :fill "none" :stroke-width 0}}]]))) diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index 8d274e84d..030b79b63 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -201,7 +201,7 @@ (st/emit! (dwt/update-editor-state shape state))) "handled")) - on-mouse-down + on-pointer-down (mf/use-callback (fn [event] (when (dom/class? (dom/get-target event) "DraftEditor-root") @@ -229,7 +229,7 @@ ;; the underlying text. Use opacity because display or visibility won't allow to recover ;; focus afterwards. :opacity (when @blurred 0)} - :on-mouse-down on-mouse-down + :on-pointer-down on-pointer-down :class (dom/classnames :align-top (= (:vertical-align content "top") "top") :align-center (= (:vertical-align content) "center") diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 02f2c6be5..bc311baf9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -37,7 +37,7 @@ shortcuts? (contains? layout :shortcuts) show-debug? (contains? layout :debug-panel) - {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} + {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} (use-resize-hook :left-sidebar 255 255 500 :x false :left) handle-collapse @@ -52,7 +52,7 @@ :style #js {"--width" (str size "px")}} [:div.resize-area {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move}] + :on-pointer-move on-pointer-move}] [:div.settings-bar-inside (cond diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index b90834ed3..908491bf5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -288,8 +288,8 @@ :current current? :hover @hover? :show-detail @show-detail?) - :on-mouse-enter #(reset! hover? true) - :on-mouse-leave #(reset! hover? false) + :on-pointer-enter #(reset! hover? true) + :on-pointer-leave #(reset! hover? false) :on-click #(st/emit! (dwc/undo-to-index idx-entry))} [:div.history-entry-summary [:div.history-entry-summary-icon (entry->icon entry)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index e00b2ef41..4d51e1480 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -503,8 +503,8 @@ [:div.element-set-actions (when on-detach [:div.element-set-actions-button - {:on-mouse-enter #(reset! hover-detach true) - :on-mouse-leave #(reset! hover-detach false) + {:on-pointer-enter #(reset! hover-detach true) + :on-pointer-leave #(reset! hover-detach false) :on-click on-detach} (if @hover-detach i/unchain i/chain)]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 44a7593d9..5a0d42059 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -167,8 +167,8 @@ [:div.color-name (str color-name)]] (when on-detach [:div.element-set-actions-button - {:on-mouse-enter #(reset! hover-detach true) - :on-mouse-leave #(reset! hover-detach false) + {:on-pointer-enter #(reset! hover-detach true) + :on-pointer-leave #(reset! hover-detach false) :on-click detach-value} (if @hover-detach i/unchain i/chain)]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 673773162..716218f32 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -204,7 +204,7 @@ (mf/defc sitemap [] - (let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} + (let [{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} (use-resize-hook :sitemap 200 38 400 :y false nil) file (mf/deref refs/workspace-file) @@ -234,4 +234,4 @@ (when @show-pages? [:div.resize-area {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move}])])) + :on-pointer-move on-pointer-move}])])) diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs index c7b7625cb..fac5ce536 100644 --- a/frontend/src/app/main/ui/workspace/textpalette.cljs +++ b/frontend/src/app/main/ui/workspace/textpalette.cljs @@ -93,7 +93,7 @@ (on-right-arrow-click) (on-left-arrow-click))))) - {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} + {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} (use-resize-hook :palette 72 54 80 :y true :bottom)] [:div.color-palette {:ref parent-ref @@ -101,7 +101,7 @@ :style #js {"--height" (str size "px")}} [:div.resize-area {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move}] + :on-pointer-move on-pointer-move}] [:& dropdown {:show (:show-menu @state) :on-close #(swap! state assoc :show-menu false)} diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 75315ba82..6b1952b14 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -169,14 +169,14 @@ on-drag-enter (actions/on-drag-enter) on-drag-over (actions/on-drag-over) on-drop (actions/on-drop file) - on-mouse-down (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing? - drawing-path? create-comment? space? panning z? workspace-read-only?) - on-mouse-up (actions/on-mouse-up disable-paste) - on-pointer-down (actions/on-pointer-down) + on-pointer-down (actions/on-pointer-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing? + drawing-path? create-comment? space? panning z? workspace-read-only?) + + on-pointer-up (actions/on-pointer-up disable-paste) + on-pointer-enter (actions/on-pointer-enter in-viewport?) on-pointer-leave (actions/on-pointer-leave in-viewport?) on-pointer-move (actions/on-pointer-move move-stream) - on-pointer-up (actions/on-pointer-up) on-move-selected (actions/on-move-selected hover hover-ids selected space? z? workspace-read-only?) on-menu-selected (actions/on-menu-selected hover hover-ids selected workspace-read-only?) @@ -221,14 +221,14 @@ disabled-guides? (or drawing-tool transform) show-padding? (and (= (count selected-shapes) 1) - (= (:type (first selected-shapes)) :frame) - (= (:layout (first selected-shapes)) :flex)) + (= (:type (first selected-shapes)) :frame) + (= (:layout (first selected-shapes)) :flex)) show-margin? (and (= (count selected-shapes) 1) (= (:layout selected-frame) :flex))] - (hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport? workspace-read-only?) + (hooks/setup-dom-events zoom disable-paste in-viewport? workspace-read-only?) (hooks/setup-viewport-size vport viewport-ref) (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? workspace-read-only?) (hooks/setup-keyboard alt? mod? space? z? shift?) @@ -309,7 +309,7 @@ :view-box (utils/format-viewbox vbox) :ref on-viewport-ref :class (when drawing-tool "drawing") - :style {:cursor @cursor} + :style {:cursor @cursor :touch-action "none"} :fill "none" :on-click on-click @@ -318,8 +318,6 @@ :on-drag-enter on-drag-enter :on-drag-over on-drag-over :on-drop on-drop - :on-mouse-down on-mouse-down - :on-mouse-up on-mouse-up :on-pointer-down on-pointer-down :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 237f2ef30..8d1a12551 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -32,14 +32,27 @@ (def scale-per-pixel -0.0057) -(defn on-mouse-down +(defn on-pointer-down [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? node-editing? grid-editing? drawing-path? create-comment? space? panning z? workspace-read-only?] (mf/use-callback (mf/deps id blocked hidden type selected edition drawing-tool text-editing? node-editing? grid-editing? drawing-path? create-comment? @z? @space? panning workspace-read-only?) + (fn [bevent] + ;; We need to handle editor related stuff here because + ;; handling on editor dom node does not works properly. + (let [target (dom/get-target bevent) + editor (.closest ^js target ".public-DraftEditor-content")] + ;; Capture mouse pointer to detect the movements even if cursor + ;; leaves the viewport or the browser itself + ;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture + (if editor + (.setPointerCapture editor (.-pointerId bevent)) + (.setPointerCapture target (.-pointerId bevent)))) + + (when (or (dom/class? (dom/get-target bevent) "viewport-controls") (dom/class? (dom/get-target bevent) "viewport-selrect")) (dom/stop-propagation bevent) @@ -80,7 +93,7 @@ (not drawing-path?)) (cond node-editing? - ;; Handle path node area selection + ;; Handle path node area selection (when-not workspace-read-only? (st/emit! (dwdp/handle-area-selection shift?))) @@ -241,12 +254,16 @@ (let [position (dom/get-client-position event)] (st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids}))))))) -(defn on-mouse-up +(defn on-pointer-up [disable-paste] (mf/use-callback (fn [event] (dom/stop-propagation event) + (let [target (dom/get-target event)] + ;; Release pointer on mouse up + (.releasePointerCapture target (.-pointerId event))) + (let [event (.-nativeEvent event) ctrl? (kbd/ctrl? event) shift? (kbd/shift? event) @@ -279,27 +296,6 @@ (fn [] (reset! in-viewport? false)))) -(defn on-pointer-down [] - (mf/use-callback - (fn [event] - ;; We need to handle editor related stuff here because - ;; handling on editor dom node does not works properly. - (let [target (dom/get-target event) - editor (.closest ^js target ".public-DraftEditor-content")] - ;; Capture mouse pointer to detect the movements even if cursor - ;; leaves the viewport or the browser itself - ;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture - (if editor - (.setPointerCapture editor (.-pointerId event)) - (.setPointerCapture target (.-pointerId event))))))) - -(defn on-pointer-up [] - (mf/use-callback - (fn [event] - (let [target (dom/get-target event)] - ; Release pointer on mouse up - (.releasePointerCapture target (.-pointerId event)))))) - (defn on-key-down [] (mf/use-callback (fn [event] @@ -333,7 +329,7 @@ (= "TEXTAREA" (obj/get target "tagName")))] (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta? editing?)))))) -(defn on-mouse-move [] +(defn on-pointer-move [move-stream] (let [last-position (mf/use-var nil)] (mf/use-callback (fn [event] @@ -345,7 +341,7 @@ delta (if @last-position (gpt/subtract raw-pt @last-position) (gpt/point 0 0))] - + (rx/push! move-stream pt) (reset! last-position raw-pt) (st/emit! (ms/->PointerEvent :delta delta (kbd/ctrl? event) @@ -358,14 +354,6 @@ (kbd/alt? event) (kbd/meta? event)))))))) -(defn on-pointer-move [move-stream] - (mf/use-callback - (mf/deps move-stream) - (fn [event] - (let [raw-pt (dom/get-client-position event) - pt (uwvv/point->viewport raw-pt)] - (rx/push! move-stream pt))))) - (defn on-mouse-wheel [zoom] (mf/use-callback (mf/deps zoom) diff --git a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs index 524791604..badd79ec2 100644 --- a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs @@ -83,7 +83,7 @@ (mf/defc gradient-color-handler [{:keys [filter-id zoom point color angle selected - on-click on-mouse-down on-mouse-up]}] + on-click on-pointer-down on-pointer-up]}] [:g {:filter (str/fmt "url(#%s)" filter-id) :transform (gmt/rotate-matrix angle point)} @@ -100,8 +100,8 @@ :height (/ gradient-square-width zoom) :fill (:value color) :on-click (partial on-click :to-p) - :on-mouse-down (partial on-mouse-down :to-p) - :on-mouse-up (partial on-mouse-up :to-p)}] + :on-pointer-down (partial on-pointer-down :to-p) + :on-pointer-up (partial on-pointer-up :to-p)}] [:rect {:data-allow-click-modal "colorpicker" :x (- (:x point) (/ gradient-square-width 2 zoom)) @@ -114,8 +114,8 @@ :fill (:value color) :fill-opacity (:opacity color) :on-click on-click - :on-mouse-down on-mouse-down - :on-mouse-up on-mouse-up}]]) + :on-pointer-down on-pointer-down + :on-pointer-up on-pointer-up}]]) (mf/defc gradient-handler-transformed [{:keys [from-p to-p width-p from-color to-color zoom editing @@ -133,7 +133,7 @@ :from-p 0 :to-p 1))))) - on-mouse-down + on-pointer-down (fn [position event] (dom/stop-propagation event) (dom/prevent-default event) @@ -144,7 +144,7 @@ :from-p 0 :to-p 1))))) - on-mouse-up + on-pointer-up (fn [_position event] (dom/stop-propagation event) (dom/prevent-default event) @@ -203,8 +203,8 @@ :cy (:y width-p) :r (/ gradient-width-handler-radius zoom) :fill gradient-width-handler-color - :on-mouse-down (partial on-mouse-down :width-p) - :on-mouse-up (partial on-mouse-up :width-p)}]]) + :on-pointer-down (partial on-pointer-down :width-p) + :on-pointer-up (partial on-pointer-up :width-p)}]]) [:& gradient-color-handler {:selected (or (not editing) (= editing 0)) @@ -214,8 +214,8 @@ :color from-color :angle angle :on-click (partial on-click :from-p) - :on-mouse-down (partial on-mouse-down :from-p) - :on-mouse-up (partial on-mouse-up :from-p)}] + :on-pointer-down (partial on-pointer-down :from-p) + :on-pointer-up (partial on-pointer-up :from-p)}] [:& gradient-color-handler {:selected (= editing 1) @@ -225,8 +225,8 @@ :color to-color :angle angle :on-click (partial on-click :to-p) - :on-mouse-down (partial on-mouse-down :to-p) - :on-mouse-up (partial on-mouse-up :to-p)}]])) + :on-pointer-down (partial on-pointer-down :to-p) + :on-pointer-up (partial on-pointer-up :to-p)}]])) (mf/defc gradient-handlers* [{:keys [zoom stops gradient editing-stop shape]}] diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index 4bbfb68b8..938aa2802 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs @@ -202,7 +202,7 @@ (mf/set-ref-val! dragging-ref false) (mf/set-ref-val! start-ref nil))) - on-mouse-move + on-pointer-move (mf/use-callback (fn [event] (when (mf/ref-val dragging-ref) @@ -234,7 +234,7 @@ :width width :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :style {:fill "transparent" :cursor (if (= type :column) (cur/resize-ew 0) diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs index dd624febd..42459e7c2 100644 --- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs @@ -93,7 +93,7 @@ (mf/set-ref-val! start-pos-ref nil) (swap! state assoc :new-position nil))) - on-mouse-move + on-pointer-move (mf/use-callback (mf/deps position zoom snap-pixel?) (fn [event] @@ -120,7 +120,7 @@ :on-pointer-down on-pointer-down :on-pointer-up on-pointer-up :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :state state :frame frame})) @@ -274,7 +274,7 @@ on-pointer-down on-pointer-up on-lost-pointer-capture - on-mouse-move + on-pointer-move state frame]} (use-guide handle-change-position get-hover-frame zoom guide) @@ -310,7 +310,7 @@ :on-pointer-down on-pointer-down :on-pointer-up on-pointer-up :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move}])) + :on-pointer-move on-pointer-move}])) (if (some? frame) (let [{:keys [l1-x1 l1-y1 l1-x2 l1-y2 @@ -399,7 +399,7 @@ on-pointer-down on-pointer-up on-lost-pointer-capture - on-mouse-move + on-pointer-move state frame]} (use-guide on-guide-change get-hover-frame zoom {:axis axis})] @@ -415,7 +415,7 @@ :on-pointer-down on-pointer-down :on-pointer-up on-pointer-up :on-lost-pointer-capture on-lost-pointer-capture - :on-mouse-move on-mouse-move + :on-pointer-move on-pointer-move :style {:fill "none" :pointer-events "fill" :cursor (if (= axis :x) (cur/resize-ew 0) (cur/resize-ns 0))}}])) diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index f911a65a8..84bd54855 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -34,25 +34,14 @@ [rumext.v2 :as mf]) (:import goog.events.EventType)) -(defn setup-dom-events [viewport-ref zoom disable-paste in-viewport? workspace-read-only?] +(defn setup-dom-events [zoom disable-paste in-viewport? workspace-read-only?] (let [on-key-down (actions/on-key-down) on-key-up (actions/on-key-up) - on-mouse-move (actions/on-mouse-move) on-mouse-wheel (actions/on-mouse-wheel zoom) on-paste (actions/on-paste disable-paste in-viewport? workspace-read-only?)] - ;; We use the DOM listener because the goog.closure one forces reflow to generate its internal - ;; structure. As we don't need currently nothing from BrowserEvent we optimize by using the basic event (mf/use-layout-effect - (mf/deps on-mouse-move) - (fn [] - (let [node (mf/ref-val viewport-ref)] - (.addEventListener node "mousemove" on-mouse-move) - (fn [] - (.removeEventListener node "mousemove" on-mouse-move))))) - - (mf/use-layout-effect - (mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-paste workspace-read-only?) + (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?) (fn [] (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down) (events/listen js/document EventType.KEYUP on-key-up) diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index de17f3fd2..6b4ba2ad4 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -33,7 +33,7 @@ :move-overlay-index]) refs/workspace-local =)) -(defn- on-mouse-down +(defn- on-pointer-down [event index {:keys [id] :as shape}] (dom/stop-propagation event) (st/emit! (dw/select-shape id)) @@ -163,7 +163,7 @@ arrow-dir (if (= dest-pos :left) :right :left)] (if-not selected? - [:g {:on-mouse-down #(on-mouse-down % index orig-shape)} + [:g {:on-pointer-down #(on-pointer-down % index orig-shape)} [:path {:stroke "var(--color-gray-20)" :fill "none" :pointer-events "visible" @@ -178,7 +178,7 @@ :arrow-dir arrow-dir :zoom zoom}])] - [:g {:on-mouse-down #(on-mouse-down % index orig-shape)} + [:g {:on-pointer-down #(on-pointer-down % index orig-shape)} [:path {:stroke "var(--color-primary)" :fill "none" :pointer-events "visible" @@ -209,7 +209,7 @@ (let [shape-rect (:selrect shape) handle-x (+ (:x shape-rect) (:width shape-rect)) handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))] - [:g {:on-mouse-down #(on-mouse-down % index shape)} + [:g {:on-pointer-down #(on-pointer-down % index shape)} [:& interaction-marker {:x handle-x :y handle-y :stroke "var(--color-primary)" @@ -246,9 +246,9 @@ dest-shape (cond-> dest-shape (some? thumbnail-data) (assoc :thumbnail thumbnail-data))] - [:g {:on-mouse-down start-move-position - :on-mouse-enter #(reset! hover-disabled? true) - :on-mouse-leave #(reset! hover-disabled? false)} + [:g {:on-pointer-down start-move-position + :on-pointer-enter #(reset! hover-disabled? true) + :on-pointer-leave #(reset! hover-disabled? false)} [:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) } [:& (mf/provider muc/render-thumbnails) {:value true} [:& (mf/provider embed/context) {:value false} diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index 214c9b599..ceab081f3 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -81,7 +81,7 @@ (st/emit! (dwc/stop-picker)) (modal/disallow-click-outside!)))) - handle-mouse-move-picker + handle-pointer-move-picker (mf/use-callback (mf/deps viewport-node) (fn [event] @@ -109,7 +109,7 @@ (.drawImage zoom-context image 0 0 200 160)))) (st/emit! (dwc/pick-color [r g b a])))))) - handle-mouse-down-picker + handle-pointer-down-picker (mf/use-callback (fn [event] (dom/prevent-default event) @@ -117,7 +117,7 @@ (st/emit! (dwu/start-undo-transaction :mouse-down-picker) (dwc/pick-color-select true (kbd/shift? event))))) - handle-mouse-up-picker + handle-pointer-up-picker (mf/use-callback (fn [event] (dom/prevent-default event) @@ -185,9 +185,9 @@ [:div.pixel-overlay {:tab-index 0 :style {:cursor cur/picker} - :on-mouse-down handle-mouse-down-picker - :on-mouse-up handle-mouse-up-picker - :on-mouse-move handle-mouse-move-picker} + :on-pointer-down handle-pointer-down-picker + :on-pointer-up handle-pointer-up-picker + :on-pointer-move handle-pointer-move-picker} [:div {:style {:display "none"}} [:img {:ref img-ref :on-load handle-image-load diff --git a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs index 75166092a..8a346f1fe 100644 --- a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs @@ -123,7 +123,7 @@ (- scrollbar-width)) h-scrollbar-x) - on-mouse-move + on-pointer-move (fn [event axis] (when-let [_ (or @v-scrolling? @h-scrolling?)] (let [start-pt (mf/ref-val start-ref) @@ -147,7 +147,7 @@ (mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x) (mf/set-ref-val! start-ref current-pt)))) - on-mouse-down + on-pointer-down (fn [event axis] (let [start-pt (dom/get-client-position event) viewport-point (point->viewport start-pt) @@ -180,7 +180,7 @@ (reset! v-scrolling? (= axis :y)) (reset! h-scrolling? (= axis :x)))) - on-mouse-up + on-pointer-up (fn [] (reset! v-scrolling? false) (reset! h-scrolling? false))] @@ -188,9 +188,9 @@ [:* (when show-v-scroll? [:g.v-scroll {:fill clr/black} - [:rect {:on-mouse-move #(on-mouse-move % :y) - :on-mouse-down #(on-mouse-down % :y) - :on-mouse-up on-mouse-up + [:rect {:on-pointer-move #(on-pointer-move % :y) + :on-pointer-down #(on-pointer-down % :y) + :on-pointer-up on-pointer-up :width (* inv-zoom 7) :rx (* inv-zoom 3) :ry (* inv-zoom 3) @@ -202,9 +202,9 @@ :stroke-width (/ 0.15 zoom)}}]]) (when show-h-scroll? [:g.h-scroll {:fill clr/black} - [:rect {:on-mouse-move #(on-mouse-move % :x) - :on-mouse-down #(on-mouse-down % :x) - :on-mouse-up on-mouse-up + [:rect {:on-pointer-move #(on-pointer-move % :x) + :on-pointer-down #(on-pointer-down % :x) + :on-pointer-up on-pointer-up :width scrollbar-width :rx (* inv-zoom 3) :ry (* inv-zoom 3) diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index a3977510c..b0f21b6c4 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -45,7 +45,7 @@ :width width :height height :transform (str transform) - :on-mouse-down on-move-selected + :on-pointer-down on-move-selected :on-context-menu on-context-menu :style {:stroke color :stroke-width (/ selection-rect-width zoom) @@ -172,7 +172,7 @@ :fill (if (debug? :handlers) "blue" "none") :stroke-width 0 :transform (dm/str transform) - :on-mouse-down on-rotate}])) + :on-pointer-down on-rotate}])) (mf/defc resize-point-handler [{:keys [cx cy zoom position on-resize transform rotation color align]}] @@ -208,9 +208,9 @@ :style {:fill (if (debug? :handlers) "red" "none") :stroke-width 0 :cursor cursor} - :on-mouse-down #(on-resize {:x cx' :y cy'} %)}]) + :on-pointer-down #(on-resize {:x cx' :y cy'} %)}]) - [:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %) + [:circle {:on-pointer-down #(on-resize {:x cx' :y cy'} %) :r (/ resize-point-circle-radius zoom) :cx cx' :cy cy' @@ -246,7 +246,7 @@ :width length :height height :transform transform-str - :on-mouse-down #(on-resize res-point %) + :on-pointer-down #(on-resize res-point %) :style {:fill (if (debug? :handlers) "yellow" "none") :stroke-width 0 :cursor (if (#{:left :right} position) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 261361df6..b906bc533 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -97,7 +97,7 @@ #(mf/deferred % ts/raf)]} [{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select]}] (let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) - on-mouse-down + on-pointer-down (mf/use-callback (mf/deps (:id frame) on-frame-select workspace-read-only?) (fn [bevent] @@ -155,7 +155,7 @@ :class "workspace-frame-label" :style {:fill (when selected? "var(--color-primary-dark)")} :visibility (if show-artboard-names? "visible" "hidden") - :on-mouse-down on-mouse-down + :on-pointer-down on-pointer-down :on-double-click on-double-click :on-context-menu on-context-menu :on-pointer-enter on-pointer-enter @@ -204,7 +204,7 @@ (let [{:keys [x y]} frame flow-pos (gpt/point x (- y (/ 35 zoom))) - on-mouse-down + on-pointer-down (mf/use-callback (mf/deps (:id frame) on-frame-select) (fn [bevent] @@ -237,7 +237,7 @@ :height 24 :transform (vwu/text-transform flow-pos zoom)} [:div.flow-badge {:class (dom/classnames :selected selected?)} - [:div.content {:on-mouse-down on-mouse-down + [:div.content {:on-pointer-down on-pointer-down :on-double-click on-double-click :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave} From 107d607d3778124d0d1a861c2c78864fff1d8704 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 15 Mar 2023 09:25:52 +0100 Subject: [PATCH 11/12] :bug: Fix error with empty curves --- .../main/data/workspace/drawing/curve.cljs | 3 +- frontend/src/app/util/path/format.cljs | 33 +++++++++++-------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/main/data/workspace/drawing/curve.cljs b/frontend/src/app/main/data/workspace/drawing/curve.cljs index 5f8a8e34f..307f0973a 100644 --- a/frontend/src/app/main/data/workspace/drawing/curve.cljs +++ b/frontend/src/app/main/data/workspace/drawing/curve.cljs @@ -49,7 +49,8 @@ (let [objects (wsh/lookup-page-objects state) content (get-in state [:workspace-drawing :object :content] []) - position (gpt/point (get-in content [0 :params] nil)) + start (get-in content [0 :params] nil) + position (when start (gpt/point start)) frame-id (ctst/top-nested-frame objects position) flex-layout? (ctl/flex-layout? objects frame-id) drop-index (when flex-layout? (gsl/get-drop-index frame-id objects position))] diff --git a/frontend/src/app/util/path/format.cljs b/frontend/src/app/util/path/format.cljs index e9c36d50d..f7628bc33 100644 --- a/frontend/src/app/util/path/format.cljs +++ b/frontend/src/app/util/path/format.cljs @@ -112,20 +112,25 @@ (update command :params assoc :x x :y y)) (defn format-path [content] - (let [result (make-array (count content))] - (reduce (fn [last-move current] - (let [point (upc/command->point current) - current-move? (= :move-to (:command current)) - last-move (if current-move? point last-move)] + (try + (let [result (make-array (count content))] + (reduce (fn [last-move current] + (let [point (upc/command->point current) + current-move? (= :move-to (:command current)) + last-move (if current-move? point last-move)] - (if (and (not current-move?) (pt= last-move point)) - (arr/conj! result (command->string (set-point current last-move))) - (arr/conj! result (command->string current))) + (if (and (not current-move?) (pt= last-move point)) + (arr/conj! result (command->string (set-point current last-move))) + (arr/conj! result (command->string current))) - (when (and (not current-move?) (pt= last-move point)) - (arr/conj! result "Z")) + (when (and (not current-move?) (pt= last-move point)) + (arr/conj! result "Z")) - last-move)) - nil - content) - (.join ^js result ""))) + last-move)) + nil + content) + (.join ^js result "")) + + (catch :default err + (.error js/console err) + nil))) From 2dea2d9d27f54af802ef1d6b10d6a84c49059fb2 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 15 Mar 2023 09:28:04 +0100 Subject: [PATCH 12/12] :bug: Ignore remote changes in size --- common/src/app/common/pages/changes_builder.cljc | 10 ++++++++++ frontend/src/app/main/data/workspace/changes.cljs | 7 ++++--- .../src/app/main/data/workspace/notifications.cljs | 4 +++- frontend/src/app/main/data/workspace/texts.cljs | 4 ++-- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/common/src/app/common/pages/changes_builder.cljc b/common/src/app/common/pages/changes_builder.cljc index 919c9e90c..3cf5c6100 100644 --- a/common/src/app/common/pages/changes_builder.cljc +++ b/common/src/app/common/pages/changes_builder.cljc @@ -669,3 +669,13 @@ :id id}) (update :undo-changes d/preconj {:type :del-component :id id}))) + +(defn ignore-remote + [changes] + (letfn [(add-ignore-remote + [change-list] + (->> change-list + (mapv #(assoc % :ignore-remote? true))))] + (-> changes + (update :redo-changes add-ignore-remote) + (update :undo-changes add-ignore-remote)))) diff --git a/frontend/src/app/main/data/workspace/changes.cljs b/frontend/src/app/main/data/workspace/changes.cljs index 43a520b27..771b873ce 100644 --- a/frontend/src/app/main/data/workspace/changes.cljs +++ b/frontend/src/app/main/data/workspace/changes.cljs @@ -55,8 +55,8 @@ (defn update-shapes ([ids update-fn] (update-shapes ids update-fn nil)) - ([ids update-fn {:keys [reg-objects? save-undo? stack-undo? attrs ignore-tree page-id] - :or {reg-objects? false save-undo? true stack-undo? false}}] + ([ids update-fn {:keys [reg-objects? save-undo? stack-undo? attrs ignore-tree page-id ignore-remote?] + :or {reg-objects? false save-undo? true stack-undo? false ignore-remote? false}}] (us/assert ::coll-of-uuid ids) (us/assert fn? update-fn) @@ -85,7 +85,8 @@ changes (add-group-id changes state)] (rx/concat (if (seq (:redo-changes changes)) - (let [changes (cond-> changes reg-objects? (pcb/resize-parents ids))] + (let [changes (cond-> changes reg-objects? (pcb/resize-parents ids)) + changes (cond-> changes ignore-remote? (pcb/ignore-remote))] (rx/of (commit-changes changes))) (rx/empty)) diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index e4ea1543c..7002f8ea1 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -221,7 +221,9 @@ (dch/update-indices page-id changes)) ;; We update `position-data` from the incoming message - changes (->> changes (mapv update-position-data)) + changes (->> changes + (mapv update-position-data) + (d/removev :ignore-remote?)) changes-by-pages (group-by :page-id changes)] (rx/merge diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 12abce5d6..53343202a 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -414,7 +414,7 @@ (let [ids (->> (keys props) (filter changed-text?))] (rx/of (dwu/start-undo-transaction undo-id) - (dch/update-shapes ids update-fn {:reg-objects? true :stack-undo? true}) + (dch/update-shapes ids update-fn {:reg-objects? true :stack-undo? true :ignore-remote? true}) (ptk/data-event :layout/update ids) (dwu/commit-undo-transaction undo-id)))))))) @@ -558,7 +558,7 @@ (fn [shape] (-> shape (assoc :position-data (get position-data (:id shape))))) - {:stack-undo? true :reg-objects? false})) + {:stack-undo? true :reg-objects? false :ignore-remote? true})) (rx/of (fn [state] (dissoc state ::update-position-data-debounce ::update-position-data))))))))