more improvements for widgets

nfdi4plants · Feb 2, 2024 · 93542ff · 93542ff
1 parent 47dab42
commit 93542ff
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/Client/MainComponents/Widgets.fs b/src/Client/MainComponents/Widgets.fs
@@ -28,18 +28,26 @@ module MoveEventListener =
 
     open Fable.Core.JsInterop
 
-    let onmousemove (element:IRefValue<HTMLElement option>) (startPosition: Rect) setPosition = fun (e: Event) ->
+    let calculatePosition (element:IRefValue<HTMLElement option>) (startPosition: Rect) = fun (e: Event) ->
         let e : MouseEvent = !!e
         let maxX = Browser.Dom.window.innerWidth - element.current.Value.offsetWidth;
         let tempX = int e.clientX - startPosition.X
         let newX = System.Math.Min(System.Math.Max(tempX,0),int maxX)
         let maxY = Browser.Dom.window.innerHeight - element.current.Value.offsetHeight;
         let tempY = int e.clientY - startPosition.Y
         let newY = System.Math.Min(System.Math.Max(tempY,0),int maxY)
-        setPosition (Some {X = newX; Y = newY})
+        {X = newX; Y = newY}
+
+    let onmousemove (element:IRefValue<HTMLElement option>) (startPosition: Rect) setPosition = fun (e: Event) ->
+        let nextPosition = calculatePosition element startPosition e
+        setPosition (Some nextPosition)
 
-    let onmouseup onmousemove = 
+    let onmouseup (element:IRefValue<HTMLElement option>) onmousemove = 
         Browser.Dom.document.removeEventListener("mousemove", onmousemove)
+        if element.current.IsSome then
+            let rect = element.current.Value.getBoundingClientRect()
+            let position = {X = int rect.left; Y = int rect.top}
+            Position.write(BuildingBlockWidgets,position)
 
 module ResizeEventListener =
 
@@ -51,8 +59,10 @@ module ResizeEventListener =
         //let height = int e.clientY - startPosition.Y + startSize.Y
         setSize (Some {X = width; Y = startSize.Y})
 
-    let onmouseup onmousemove = 
+    let onmouseup (element: IRefValue<HTMLElement option>) onmousemove = 
         Browser.Dom.document.removeEventListener("mousemove", onmousemove)
+        if element.current.IsSome then 
+            Size.write(BuildingBlockWidgets,{X = int element.current.Value.offsetWidth; Y = int element.current.Value.offsetHeight})
 
 module Elements =
     let resizeElement (content: ReactElement)  =
@@ -71,16 +81,13 @@ type Widgets =
         let resizeElement (content: ReactElement) =
             Bulma.modalCard [
                 prop.ref element
-                prop.onMouseDown(fun e -> 
+                prop.onMouseDown(fun e ->  // resize
                     e.preventDefault()
                     e.stopPropagation()
                     let startPosition = {X = int e.clientX; Y = int e.clientY}
                     let startSize = {X = int element.current.Value.offsetWidth; Y = int element.current.Value.offsetHeight}
                     let onmousemove = ResizeEventListener.onmousemove startPosition startSize setSize
-                    let onmouseup = fun e -> 
-                        ResizeEventListener.onmouseup onmousemove
-                        if size.IsSome then 
-                            Size.write(BuildingBlockWidgets,{X = int element.current.Value.offsetWidth; Y = int element.current.Value.offsetHeight})
+                    let onmouseup = fun e -> ResizeEventListener.onmouseup element onmousemove
                     Browser.Dom.document.addEventListener("mousemove", onmousemove)
                     let config = createEmpty<AddEventListenerOptions>
                     config.once <- true
@@ -93,27 +100,26 @@ type Widgets =
                     if size.IsSome then
                         style.width size.Value.X
                     if position.IsNone then
-                        style.transform.translate (length.perc -50,length.perc -50)
-                        style.top (length.perc 50); style.left (length.perc 50); 
-                    if position.IsSome then
+                        //style.transform.translate (length.perc -50,length.perc -50)
+                        style.top (length.perc 20); style.left (length.perc 20); 
+                    else
                         style.top position.Value.Y; style.left position.Value.X; 
                 ]
                 prop.children content
             ]
         resizeElement <| Html.div [
+            prop.onMouseDown(fun e -> e.stopPropagation())
+            prop.style [style.cursor.defaultCursor]
             prop.children [
                 Bulma.modalCardHead [
-                    prop.onMouseDown(fun e -> 
+                    prop.onMouseDown(fun e -> // move
                         e.preventDefault()
                         e.stopPropagation()
                         let x = e.clientX - element.current.Value.offsetLeft
                         let y = e.clientY - element.current.Value.offsetTop;
                         let startPosition = {X = int x; Y = int y}
                         let onmousemove = MoveEventListener.onmousemove element startPosition setPosition
-                        let onmouseup = fun e -> 
-                            MoveEventListener.onmouseup onmousemove
-                            if position.IsSome then 
-                                Position.write(BuildingBlockWidgets,position.Value)
+                        let onmouseup = fun e -> MoveEventListener.onmouseup element onmousemove
                         Browser.Dom.document.addEventListener("mousemove", onmousemove)
                         let config = createEmpty<AddEventListenerOptions>
                         config.once <- true