Replace deprecated UIEvent.which

Author: hyazinthh

src/Aardvark.UI.Primitives/Controllers/ArcBallController.fs

@@ -244,39 +244,6 @@ module ArcBallController =
 
                 { model with view = cam; dragStart = pos; orbitCenter = center }
 
-    [<Obsolete>]
-    let onMouseDown (cb : MouseButtons -> V2i -> 'msg) = 
-        onEvent 
-            "onmousedown" 
-            ["event.clientX"; "event.clientY"; "event.which"; "event.getModifierState('Control')" ]
-            (fun args ->
-                match args with
-                    | x :: y :: b :: isControl :: _ ->
-                        let x = int (float x)
-                        let y = int (float y)
-                        let b = MouseButtons.ofEventStr b
-                        let modKey = if b = MouseButtons.Left && isControl = "true" then MouseButtons.Right else b
-                        cb modKey (V2i(x,y))
-                    | _ ->
-                        failwith "asdasd"
-            )
-
-    (*let onMouseUp (cb : MouseButtons -> V2i -> 'msg) = 
-        onEvent 
-            "onmouseup" 
-            ["event.clientX"; "event.clientY"; "event.which"; "event.getModifierState('Control')" ]
-            (fun args ->
-                match args with
-                    | x :: y :: b :: isControl :: _ ->
-                        let x = int (float x)
-                        let y = int (float y)
-                        let b = Aardvark.UI.Helpers.button b
-                        let modKey = if b = MouseButtons.Left && isControl = "true" then MouseButtons.Right else b
-                        cb modKey (V2i(x,y))
-                    | _ ->
-                        failwith "asdasd"
-            )*)
-
     let attributes (state : AdaptiveCameraControllerState) (f : Message -> 'msg) =
         AttributeMap.ofListCond [
             always (onBlur (fun _ -> f Blur))

src/Aardvark.UI/Frontend/Attributes.fs

@@ -170,13 +170,13 @@ module Events =
     let onMouseDown (cb : MouseButtons -> V2i -> 'msg) = 
         onEvent 
             "onmousedown" 
-            ["event.clientX"; "event.clientY"; "event.which"] 
+            ["event.clientX"; "event.clientY"; "event.button"]
             (fun args ->
                 match args with
                     | x :: y :: b :: _ ->
                         let x = int (float x)
                         let y = int (float y)
-                        let b = MouseButtons.ofEventStr b
+                        let b = MouseButtons.parseEventButton b
                         cb b (V2i(x,y))
                     | _ ->
                         failwith "asdasd"
@@ -185,13 +185,13 @@ module Events =
     let onMouseUp (cb : MouseButtons -> V2i -> 'msg) = 
         onEvent 
             "onmouseup" 
-            ["event.clientX"; "event.clientY"; "event.which"] 
+            ["event.clientX"; "event.clientY"; "event.button"]
             (fun args ->
                 match args with
                     | x :: y :: b :: _ ->
                         let x = int (float x)
                         let y = int (float y)
-                        let b = MouseButtons.ofEventStr b
+                        let b = MouseButtons.parseEventButton b
                         cb b (V2i(x,y))
                     | _ ->
                         failwith "asdasd"
@@ -303,45 +303,55 @@ module Events =
         k, m |> AVal.map (function true -> Some v | false -> None)
 
 
-    let internal onMouseRel (kind : string) (needButton : bool) (f : MouseButtons -> V2d -> 'msg) =
+    let private onMouseRel (kind : string) (needButton : bool) (cb : MouseButtons -> V2d -> 'msg) =
+        let eventButton, parseEventButton =
+            if needButton then
+                "button",  MouseButtons.parseEventButton
+            else
+                "buttons", MouseButtons.parseEventButtons
+
         kind, AttributeValue.Event {
             clientSide = fun send src -> 
                 String.concat ";" [
                     "var rect = getBoundingClientRect(event.target)"
                     "var x = (event.clientX - rect.left) / rect.width"
                     "var y = (event.clientY - rect.top) / rect.height"
-                    send src ["event.which"; "{ X: x.toFixed(10), Y: y.toFixed(10) }"]
-                        
+                    send src [$"event.{eventButton}"; "{ X: x.toFixed(10), Y: y.toFixed(10) }"]
                 ]
             serverSide = fun client src args -> 
                 match args with
-                    | which :: pos :: _ ->
-                        let v : V2d = Pickler.json.UnPickleOfString pos
-                        let button = if needButton then MouseButtons.ofEventStr which else MouseButtons.Left
-                        Seq.singleton (f button v)
-                    | _ ->
-                        Seq.empty
+                | buttons :: pos :: _ ->
+                    let v : V2d = Pickler.json.UnPickleOfString pos
+                    let button = parseEventButton buttons
+                    Seq.singleton (cb button v)
+                | _ ->
+                    Seq.empty
         }
 
-    let internal onMouseAbs (kind : string) (needButton : bool) (f : MouseButtons -> V2d -> V2d -> 'msg) =
+    let private onMouseAbs (kind : string) (needButton : bool) (cb : MouseButtons -> V2d -> V2d -> 'msg) =
+        let eventButton, parseEventButton =
+            if needButton then
+                "button",  MouseButtons.parseEventButton
+            else
+                "buttons", MouseButtons.parseEventButtons
+
         kind, AttributeValue.Event {
             clientSide = fun send src -> 
                 String.concat ";" [
                     "var rect = getBoundingClientRect(event.target)"
                     "var x = (event.clientX - rect.left)"
                     "var y = (event.clientY - rect.top)"
-                    send src ["event.which"; "{ X: x.toFixed(10), Y: y.toFixed(10) }"; "{ X: rect.width.toFixed(10), Y: rect.height.toFixed(10) }"]
-                        
+                    send src [$"event.{eventButton}"; "{ X: x.toFixed(10), Y: y.toFixed(10) }"; "{ X: rect.width.toFixed(10), Y: rect.height.toFixed(10) }"]
                 ]
             serverSide = fun client src args -> 
                 match args with
-                    | which :: pos :: size :: _ ->
-                        let pos : V2d = Pickler.json.UnPickleOfString pos
-                        let size : V2d = Pickler.json.UnPickleOfString size
-                        let button = if needButton then MouseButtons.ofEventStr which else MouseButtons.Left
-                        Seq.singleton (f button pos size)
-                    | _ ->
-                        Seq.empty
+                | buttons :: pos :: size :: _ ->
+                    let pos : V2d = Pickler.json.UnPickleOfString pos
+                    let size : V2d = Pickler.json.UnPickleOfString size
+                    let button = parseEventButton buttons
+                    Seq.singleton (cb button pos size)
+                | _ ->
+                    Seq.empty
         }
 
     let onMouseDownAbs (f : MouseButtons -> V2d -> V2d -> 'msg) =
@@ -355,12 +365,10 @@ module Events =
 
     let onMouseClickAbs (f : MouseButtons -> V2d -> V2d -> 'msg) =
         onMouseAbs "onclick" true f
-        
+
     let onMouseDoubleClickAbs (f : MouseButtons -> V2d -> V2d -> 'msg) =
         onMouseAbs "ondblclick" true f
 
-
-
     let onMouseDownRel (f : MouseButtons -> V2d -> 'msg) =
         onMouseRel "onmousedown" true f
 
@@ -408,32 +416,44 @@ module Events =
             | "pen" -> Pen
             | _ -> failwith $"PointerType '{str}' not supported"
 
-    let onPointerEventModifiers (name: string) (needButton : bool) (preventDefault : Option<int>) (useCapture : Option<bool>)
+    let onPointerEventModifiers (name: string) (needButton : bool) (preventDefault : Option<MouseButtons>) (useCapture : Option<bool>)
                                 (cb : PointerType -> KeyModifiers -> MouseButtons -> V2i -> 'msg) =
+        let eventButton, parseEventButton, toEventButton =
+            if needButton then
+                "button",  MouseButtons.parseEventButton,  MouseButtons.toEventButton
+            else
+                "buttons", MouseButtons.parseEventButtons, MouseButtons.toEventButtons
+
         name, AttributeValue.Event {
-                clientSide = fun send src -> 
-                    String.concat ";" [
-                        yield "var rect = getBoundingClientRect(this)"
-                        yield "var x = (event.clientX - rect.left)"
-                        yield "var y = (event.clientY - rect.top)"
-                        match preventDefault with | None -> () | Some i -> yield (sprintf "if(event.which==%d){event.preventDefault();};" i)
-                        match useCapture with | None -> () | Some b -> if b then yield "this.setPointerCapture(event.pointerId)" else yield "this.releasePointerCapture(event.pointerId)"
-                        yield send src ["event.pointerType";"event.which"; "x|0"; "y|0"; "event.shiftKey"; "event.altKey"; "event.ctrlKey"]
-
-                    ]
-                serverSide = fun client src args -> 
-                    match args with
-                        | pointertypestr :: which :: x :: y :: shift :: alt :: ctrl :: _ ->
-                            let v : V2i = V2i(int x, int y)
-                            let button = if needButton then MouseButtons.ofEventStr which else MouseButtons.None
-                            let modifiers = KeyModifiers.ofString shift alt ctrl
-                            let pointertype = PointerType.ofString pointertypestr
-                            Seq.singleton (cb pointertype modifiers button v)
-                        | _ ->
-                            Seq.empty
-            }
+            clientSide = fun send src ->
+                String.concat ";" [
+                    "var rect = getBoundingClientRect(this)"
+                    "var x = (event.clientX - rect.left)"
+                    "var y = (event.clientY - rect.top)"
+
+                    match preventDefault with
+                    | Some b -> $"if(event.{eventButton}=={toEventButton b}){{event.preventDefault();}};"
+                    | _ -> ()
+
+                    match useCapture with
+                    | Some b -> if b then "this.setPointerCapture(event.pointerId)" else "this.releasePointerCapture(event.pointerId)"
+                    | _ -> ()
+
+                    send src ["event.pointerType";$"event.{eventButton}"; "x|0"; "y|0"; "event.shiftKey"; "event.altKey"; "event.ctrlKey"]
+                ]
+            serverSide = fun client src args ->
+                match args with
+                    | pointertypestr :: buttons :: x :: y :: shift :: alt :: ctrl :: _ ->
+                        let v : V2i = V2i(int x, int y)
+                        let button = parseEventButton buttons
+                        let modifiers = KeyModifiers.ofString shift alt ctrl
+                        let pointertype = PointerType.ofString pointertypestr
+                        Seq.singleton (cb pointertype modifiers button v)
+                    | _ ->
+                        Seq.empty
+        }
 
-    let onPointerEvent name (needButton : bool) (preventDefault : Option<int>) (useCapture : Option<bool>) (f : PointerType -> MouseButtons -> V2i -> 'msg) =
+    let onPointerEvent name (needButton : bool) (preventDefault : Option<MouseButtons>) (useCapture : Option<bool>) (f : PointerType -> MouseButtons -> V2i -> 'msg) =
         onPointerEventModifiers name needButton preventDefault useCapture (fun t _ b p -> f t b p)
 
     let onCapturedPointerDown preventDefault cb  =

src/Aardvark.UI/RenderControl/RenderControl.fs

@@ -27,13 +27,6 @@ module ``RenderControl DomNode`` =
         let needingButton = Set.ofList [SceneEventKind.Click; SceneEventKind.DoubleClick; SceneEventKind.Down; SceneEventKind.Up]
         fun k -> Set.contains k needingButton
 
-    let private button (code : int) =
-        match code with
-        | 1 -> MouseButtons.Left
-        | 2 -> MouseButtons.Middle
-        | 3 -> MouseButtons.Right
-        | _ -> MouseButtons.None
-
     type DomNode with
         static member RenderControl(attributes : AttributeMap<'msg>, processor : SceneEventProcessor<'msg>,
                                     getState : RenderClientInfo -> RenderState, scene : Scene) =
@@ -68,17 +61,17 @@ module ``RenderControl DomNode`` =
 
             let rayEvent (includeButton : bool) (kind : SceneEventKind) =
                 let args =
-                    if includeButton then ["event.offsetX"; "event.offsetY"; "event.altKey"; "event.shiftKey"; "event.ctrlKey"; "event.which"]
+                    if includeButton then ["event.offsetX"; "event.offsetY"; "event.altKey"; "event.shiftKey"; "event.ctrlKey"; "event.button"]
                     else ["event.offsetX"; "event.offsetY"; "event.altKey"; "event.shiftKey"; "event.ctrlKey" ]
 
                 {
                     clientSide = fun send id -> send id args + ";"
                     serverSide = fun session id args ->
                         match args with
-                        | x :: y :: alt :: shift :: ctrl :: which :: _ ->
+                        | x :: y :: alt :: shift :: ctrl :: buttons :: _ ->
                             let x = round (float x) |> int
                             let y = round (float y) |> int
-                            let button = int which |> button
+                            let button = MouseButtons.parseEventButton buttons
                             let alt = Boolean.Parse alt
                             let shift = Boolean.Parse shift
                             let ctrl = Boolean.Parse ctrl

src/Aardvark.UI/Utilities/Common.fs

@@ -15,15 +15,45 @@ type RayPartExtensions =
 
 module MouseButtons =
 
-    let ofEvent (button: int) =
+    /// See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    let ofEventButton (button: int) =
         match button with
-        | 1 -> MouseButtons.Left
-        | 2 -> MouseButtons.Middle
-        | 3 -> MouseButtons.Right
+        | 0 -> MouseButtons.Left
+        | 1 -> MouseButtons.Middle
+        | 2 -> MouseButtons.Right
         | _ -> MouseButtons.None
 
-    let ofEventStr (button: string) =
-        button |> float |> int |> ofEvent
+    /// See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    let toEventButton (button: MouseButtons) =
+        match button with
+        | MouseButtons.Left   -> 0
+        | MouseButtons.Middle -> 1
+        | MouseButtons.Right  -> 2
+        | _ -> 0
+
+    /// See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    let parseEventButton (button: string) =
+        button |> float |> int |> ofEventButton
+
+    /// See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+    let ofEventButtons (buttons: int) =
+        let mutable result = MouseButtons.None
+        if buttons &&& 1 = 1 then &result |||= MouseButtons.Left
+        if buttons &&& 2 = 2 then &result |||= MouseButtons.Right
+        if buttons &&& 4 = 4 then &result |||= MouseButtons.Middle
+        result
+
+    /// See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+    let parseEventButtons (buttons: string) =
+        buttons |> float |> int |> ofEventButtons
+
+    /// See: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+    let toEventButtons (buttons: MouseButtons) =
+        let mutable result = 0
+        if buttons.HasFlag MouseButtons.Left then &result |||= 1
+        if buttons.HasFlag MouseButtons.Right then &result |||= 2
+        if buttons.HasFlag MouseButtons.Middle then &result |||= 4
+        result
 
 [<AutoOpen>]
 module ``Path Utilities`` =

src/Examples (dotnetcore)/06 - DragDiv/resources/DragUtilities.js

@@ -4,4 +4,8 @@
     var x = event.clientX - bounds.left;
     var y = event.clientY - bounds.top;
     return { x: x, y: y }; 
-}   
+}
+
+function toFixedV2d(v) {
+    return { X: v.x.toFixed(10), Y: v.y.toFixed(10) };
+}

src/Examples (dotnetcore)/15 - Svg/resources/SvgDragUtilities.js

@@ -145,6 +145,10 @@ function getScreenCTM(doc) {
     return sCTM
 }
 
+function toFixedV2d(v) {
+    return { X: v.x.toFixed(10), Y: v.y.toFixed(10) };
+}
+
 function mouseUp(documentElement, evt) {
     if (draggingElement) {
 

src/Scratch/02 - DrawRects/App.fs

@@ -110,12 +110,12 @@ module ClientApp =
     let myMouseCbRelButton (evtName : string) (containerClass : string)  (cb : MouseButtons -> V2d -> 'msg) = 
         onEvent' 
             evtName
-            [sprintf "relativeCoords2(event,'%s')" containerClass; "event.which"] 
+            [sprintf "relativeCoords2(event,'%s')" containerClass; "event.button"]
             (fun args ->
                 match args with
                     | x :: b :: _ ->
                         let v : Option<V2d> = Pickler.json.UnPickleOfString x
-                        let b : MouseButtons =  b |> MouseButtons.ofEventStr
+                        let b : MouseButtons =  b |> MouseButtons.parseEventButton
                         match v with
                             | Some v -> cb b v |> Seq.singleton
                             | None -> Seq.empty