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

CHANGES.md

@@ -39,6 +39,8 @@
 - 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)
+- 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:

common/src/app/common/geom/matrix.cljc

@@ -187,20 +187,28 @@
 
 (defn scale-matrix
   ([pt center]
-   (-> (matrix)
+   (let [sx (dm/get-prop pt :x)
-       (multiply! (translate-matrix center))
+         sy (dm/get-prop pt :y)
-       (multiply! (scale-matrix pt))
+         cx (dm/get-prop center :x)
-       (multiply! (translate-matrix (gpt/negate center)))))
+         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)))
 
 (defn rotate-matrix
   ([angle point]
-   (-> (matrix)
+   (let [cx (dm/get-prop point :x)
-       (multiply! (translate-matrix point))
+         cy (dm/get-prop point :y)
-       (multiply! (rotate-matrix angle))
+         nx (- cx)
-       (multiply! (translate-matrix (gpt/negate point)))))
+         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)

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

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

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

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])))
 
@@ -542,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
@@ -564,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]
@@ -635,28 +644,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]
+                  (partial transform-text-node value))))
-                    (let [font-size (-> (get attrs :font-size 14)
-                                        (d/parse-double)
-                                        (* value)
-                                        (str)) ]
-                      (d/txt-merge attrs {:font-size font-size}))))))
 
           (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,9 +679,15 @@
                     
               (d/not-empty? (:shadow shape))
               (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]
@@ -698,7 +717,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))

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

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]
+  ([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}}]
+                   :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))
 

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

frontend/src/app/main/data/workspace/modifiers.cljs

@@ -438,14 +438,20 @@
                            :flip-x
                            :flip-y
                            :grow-type
-                           :layout-item-h-sizing
+                           :position-data
-                           :layout-item-v-sizing
+                           :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]

frontend/src/app/main/data/workspace/notifications.cljs

@@ -202,24 +202,28 @@
             (fn [{:keys [type attr]}]
               (and (= :set type) (= attr :position-data)))
 
-            add-origin-session-id
+            ;;add-origin-session-id
-            (fn [{:keys [] :as op}]
+            ;;(fn [{:keys [] :as op}]
-              (cond-> op
+            ;;  (cond-> op
-                (position-data-operation? op)
+            ;;    (position-data-operation? op)
-                (update :val with-meta {:session-id (:session-id msg)})))
+            ;;    (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]]
               (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

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

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

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

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

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

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

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-pointer-enter on-pointer-enter
-                         :on-mouse-leave on-mouse-leave
+                         :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-pointer-enter (partial on-pointer-enter padding-num (get padding padding-num))
-                            :on-mouse-leave on-mouse-leave
+                            :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-pointer-enter on-pointer-enter
-                        :on-mouse-leave on-mouse-leave
+                        :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-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
-         :on-mouse-leave on-mouse-leave
+         :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-pointer-enter on-pointer-enter
-                      :on-mouse-leave on-mouse-leave
+                      :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,16 +683,16 @@
         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)}
 
         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))
 
@@ -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-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
-                           :on-mouse-leave on-mouse-leave
+                           :on-pointer-leave on-pointer-leave
                            :rect-data display-item
                            :hover?    (= @hover gap-type)
                            :selected? (= gap-selected gap-type)

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.POINTERDOWN       handle-click-outside)
 
                    (events/listen js/document EventType.CONTEXTMENU handle-click-outside)]]
          #(doseq [key keys]

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-pointer-enter (handle-hover-shape shape true)
-                             :on-mouse-leave (handle-hover-shape shape false)
+                             :on-pointer-leave (handle-hover-shape shape false)
                              :on-click (select-shape shape)}
          [:& component {:shape shape
                         :frame frame

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-pointer-down on-pointer-down
-                                   :on-mouse-up on-mouse-up
+                                   :on-pointer-up on-pointer-up
-                                   :on-mouse-enter on-mouse-enter
+                                   :on-pointer-enter on-pointer-enter
-                                   :on-mouse-leave on-mouse-leave}
+                                   :on-pointer-leave on-pointer-leave}
 
                [:& component {:shape shape
                               :frame frame

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

@@ -162,7 +162,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

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

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

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

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))) "%")}}]]))

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)

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)

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-pointer-down on-pointer-down
-               :on-mouse-enter on-enter
+               :on-pointer-enter on-enter
-               :on-mouse-leave on-leave
+               :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-pointer-down on-pointer-down
-                 :on-mouse-enter on-enter
+                 :on-pointer-enter on-enter
-                 :on-mouse-leave on-leave
+                 :on-pointer-leave on-leave
                  :style {:cursor (when (= edit-mode :move) cur/pointer-move)
                          :fill "none"
                          :stroke-width 0}}]])))

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

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

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-pointer-enter #(reset! hover? true)
-                         :on-mouse-leave #(reset! hover? false)
+                         :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)]

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-pointer-enter #(reset! hover-detach true)
-           :on-mouse-leave #(reset! hover-detach false)
+           :on-pointer-leave #(reset! hover-detach false)
            :on-click on-detach}
           (if @hover-detach i/unchain i/chain)])
 

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-pointer-enter #(reset! hover-detach true)
-            :on-mouse-leave #(reset! hover-detach false)
+            :on-pointer-leave #(reset! hover-detach false)
             :on-click detach-value}
            (if @hover-detach i/unchain i/chain)])
 

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

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

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?
+        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?)
+                                                   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-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)
+                           (= (:type (first selected-shapes)) :frame)
-                        (= (:layout (first selected-shapes)) :flex))
+                           (= (: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?)
@@ -310,7 +310,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
@@ -319,8 +319,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

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)

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-pointer-down (partial on-pointer-down :to-p)
-           :on-mouse-up (partial on-mouse-up :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-pointer-down on-pointer-down
-           :on-mouse-up on-mouse-up}]])
+           :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-pointer-down (partial on-pointer-down :width-p)
-                  :on-mouse-up (partial on-mouse-up :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-pointer-down (partial on-pointer-down :from-p)
-       :on-mouse-up (partial on-mouse-up :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-pointer-down (partial on-pointer-down :to-p)
-       :on-mouse-up (partial on-mouse-up :to-p)}]]))
+       :on-pointer-up (partial on-pointer-up :to-p)}]]))
 
 (mf/defc gradient-handlers*
   [{:keys [zoom stops gradient editing-stop shape]}]

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)

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

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)
+     (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
-     (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?)
      (fn []
        (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
                    (events/listen js/document EventType.KEYUP on-key-up)
@@ -261,7 +250,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))]

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
+        [:g {:on-pointer-down start-move-position
-             :on-mouse-enter #(reset! hover-disabled? true)
+             :on-pointer-enter #(reset! hover-disabled? true)
-             :on-mouse-leave #(reset! hover-disabled? false)}
+             :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}

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-pointer-down handle-pointer-down-picker
-       :on-mouse-up handle-mouse-up-picker
+       :on-pointer-up handle-pointer-up-picker
-       :on-mouse-move handle-mouse-move-picker}
+       :on-pointer-move handle-pointer-move-picker}
       [:div {:style {:display "none"}}
        [:img {:ref img-ref
               :on-load handle-image-load

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)
+        [:rect {:on-pointer-move #(on-pointer-move % :y)
-                :on-mouse-down #(on-mouse-down % :y)
+                :on-pointer-down #(on-pointer-down % :y)
-                :on-mouse-up   on-mouse-up
+                :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)
+        [:rect {:on-pointer-move #(on-pointer-move % :x)
-                :on-mouse-down #(on-mouse-down % :x)
+                :on-pointer-down #(on-pointer-down % :x)
-                :on-mouse-up  on-mouse-up
+                :on-pointer-up  on-pointer-up
                 :width scrollbar-width
                 :rx (* inv-zoom 3)
                 :ry (* inv-zoom 3)

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)

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}

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))]
+  (try
-    (reduce (fn [last-move current]
+    (let [result (make-array (count content))]
-              (let [point         (upc/command->point current)
+      (reduce (fn [last-move current]
-                    current-move? (= :move-to (:command current))
+                (let [point         (upc/command->point current)
-                    last-move     (if current-move? point last-move)]
+                      current-move? (= :move-to (:command current))
+                      last-move     (if current-move? point last-move)]
 
-                (if (and (not current-move?) (pt= last-move point))
+                  (if (and (not current-move?) (pt= last-move point))
-                  (arr/conj! result (command->string (set-point current last-move)))
+                    (arr/conj! result (command->string (set-point current last-move)))
-                  (arr/conj! result (command->string current)))
+                    (arr/conj! result (command->string current)))
 
-                (when (and (not current-move?) (pt= last-move point))
+                  (when (and (not current-move?) (pt= last-move point))
-                  (arr/conj! result "Z"))
+                    (arr/conj! result "Z"))
 
-                last-move))
+                  last-move))
-            nil
+              nil
-            content)
+              content)
-    (.join ^js result "")))
+      (.join ^js result ""))
+
+    (catch :default err
+      (.error js/console err)
+      nil)))