improve right click handling

src/renderer/events.cljs

@@ -108,46 +108,50 @@
 
 (rf/reg-event-db
  :pointer-event
- (fn [{:keys [pointer-offset tool content-rect] :as db} [_ e]]
-   (let [{:keys [pointer-pos delta element]} e
-         pointer-pos (mapv js/parseInt pointer-pos)
+ (fn [{:keys [pointer-offset tool content-rect drag?] :as db}
+      [_ {:keys [button buttons modifiers data-transfer pointer-pos delta element] :as e}]]
+   (let [pointer-pos (mapv js/parseInt pointer-pos)
          adjusted-pointer-pos (frame-h/adjusted-pointer-pos db pointer-pos)]
      (case (:type e)
        :pointermove
-       (-> (if (and (significant-movement? pointer-pos pointer-offset)
-                    (not= (:buttons e) 2))
-             (cond-> db
-               (not= tool :pan)
-               (frame-h/pan-out-of-canvas content-rect
-                                          pointer-pos
-                                          pointer-offset)
-
-               (not (:drag? db))
-               (-> (tools/drag-start e element)
-                   (assoc :drag? true))
-
-               :always
-               (tools/drag e element))
-             (tools/pointer-move db e element))
-           (assoc :pointer-pos pointer-pos
-                  :adjusted-pointer-pos adjusted-pointer-pos))
+       (if (= buttons :right)
+         db
+         (-> (if (significant-movement? pointer-pos pointer-offset)
+               (cond-> db
+                 (not= tool :pan)
+                 (frame-h/pan-out-of-canvas content-rect
+                                            pointer-pos
+                                            pointer-offset)
+
+                 (not drag?)
+                 (-> (tools/drag-start e element)
+                     (assoc :drag? true))
+
+                 :always
+                 (tools/drag e element))
+               (tools/pointer-move db e element))
+             (assoc :pointer-pos pointer-pos
+                    :adjusted-pointer-pos adjusted-pointer-pos)))
 
        :pointerdown
        (cond-> db
-         (= (:button e) 1)
+         (= button :middle)
          (-> (assoc :primary-tool tool)
              (tools/set-tool :pan))
 
+         (= button :right)
+         (tools/pointer-up e element)
+
          :always
          (-> (tools/pointer-down e element)
              (assoc :pointer-offset pointer-pos
                     :adjusted-pointer-offset adjusted-pointer-pos)))
 
        :pointerup
-       (cond-> (if (:drag? db)
+       (cond-> (if drag?
                  (tools/drag-end db e element)
-                 (tools/pointer-up db e element))
-         (and (:primary-tool db) (= (:button e) 1))
+                 (cond-> db (not= button :right) (tools/pointer-up e element)))
+         (and (:primary-tool db) (= button :middle))
          (-> (tools/set-tool (:primary-tool db))
              (dissoc :primary-tool))
 
@@ -158,16 +162,15 @@
        (tools/double-click db e element)
 
        :wheel
-       (if (some (:modifiers e) [:ctrl :alt])
+       (if (some modifiers [:ctrl :alt])
          (let [delta-y (second delta)
                factor (Math/pow (inc (/ (- 1 (:zoom-sensitivity db)) 100))
                                 (- delta-y))]
            (frame-h/zoom-in-pointer-position db factor))
          (frame-h/pan db delta))
 
        :drop
-       (let [data-transfer (:data-transfer e)
-             items (.-items data-transfer)
+       (let [items (.-items data-transfer)
              files (.-files data-transfer)]
          (-> db
              (assoc :pointer-pos pointer-pos

src/renderer/tools/element.cljs

@@ -45,7 +45,7 @@
 
 (defmethod tools/pointer-up :default
   [db e el]
-  (if-not (and (= (:button e) 2)
+  (if-not (and (= (:button e) :right)
                (:selected? el))
     (-> db
         (dissoc :clicked-element)

src/renderer/tree/views.cljs

@@ -91,6 +91,9 @@
       :on-drag-enter #(rf/dispatch [:document/set-hovered-keys #{key}])
       :on-drag-over #(.preventDefault %)
       :on-drop #(drop-handler % key)
+      :on-pointer-down (fn [e]
+                         (when (= (.-button e) 2)
+                           (rf/dispatch [:element/select key (.-ctrlKey e)])))
       :on-pointer-up (fn [e]
                        (.stopPropagation e)
                        (rf/dispatch [:element/select key (.-ctrlKey e)]))
@@ -115,10 +118,10 @@
   [e]
   (let [ctrl? (.-ctrlKey e)]
     (case (.-key e)
-    "ArrowUp" (rf/dispatch [:element/select-up ctrl?])
-    "ArrowDown" (rf/dispatch [:element/select-down ctrl?])
-    "ArrowLeft" (rf/dispatch [:element/collapse])
-    "ArrowRight" (rf/dispatch [:element/expand]))))
+      "ArrowUp" (rf/dispatch [:element/select-up ctrl?])
+      "ArrowDown" (rf/dispatch [:element/select-down ctrl?])
+      "ArrowLeft" (rf/dispatch [:element/collapse])
+      "ArrowRight" (rf/dispatch [:element/expand]))))
 
 (defn inner-sidebar []
   (let [page-elements @(rf/subscribe [:element/pages])

src/renderer/utils/pointer.cljs

@@ -6,6 +6,14 @@
   [e]
   (some #(contains? (:modifiers e) %) #{:ctrl :shift}))
 
+(def button
+  "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button"
+  [:left
+   :middle
+   :right
+   :back
+   :forward])
+
 (defn lock-direction
   "Locks pointer movement to the axis with the biggest offset"
   [[x y]]
@@ -41,8 +49,8 @@
                                      :twist (.-twist e)
                                      :tilt [(.-tiltX e) (.-tiltY e)]
                                      :data-transfer (.-dataTransfer e)
-                                     :button (.-button e)
-                                     :buttons (.-buttons e)
+                                     :button (get button (.-button e))
+                                     :buttons (get button (.-buttons e))
                                      :delta [(.-deltaX e) (.-deltaY e)]
                                      :modifiers (cond-> #{}
                                                   (.-altKey e) (conj :alt)