dan/souplesse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add scroll mouse for graphs to zoom in/out

Browse Source
This commit is contained in:
Daniel Barlow 2024-11-15 22:17:07 +00:00
parent 9cfbb78e53
commit baf3046149
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/Main.elm
View File

@ -184,6 +184,7 @@ type Msg
| PointerDown (Int, Int) | PointerDown (Int, Int)
| PointerMove (Int, Int) | PointerMove (Int, Int)
| PointerUp (Int, Int) | PointerUp (Int, Int)
| TimeScale (Float)
| Loaded (Result Http.Error (List Point)) | Loaded (Result Http.Error (List Point))
| NewUrlRequest | NewUrlRequest
| UrlChanged | UrlChanged
@ -217,6 +218,15 @@ newModel msg model =
{ model | drag = None, { model | drag = None,
centre = translatePixels model.centre (toZoom model.zoom) (dragDelta model.drag) } centre = translatePixels model.centre (toZoom model.zoom) (dragDelta model.drag) }
TimeScale factor ->
let fudge = factor
len = model.duration - floor(fudge)
in { model |
startTime = model.startTime + floor(fudge / 2)
, duration = len
}
Loaded result -> Loaded result ->
case result of case result of
Ok trk -> { model | track = Present trk } Ok trk -> { model | track = Present trk }
@ -365,15 +375,18 @@ tiles xs ys zoom =
(List.map (\ x -> tileImg zoom (TileNumber x y)) xs)) (List.map (\ x -> tileImg zoom (TileNumber x y)) xs))
ys ys
ifTrack track content = ifTrack : Model -> (List Point -> Html msg) -> Html msg
case track of ifTrack model content =
Present t -> content t case model.track of
Present t ->
let points = Point.subseq t (toFloat model.startTime) (toFloat model.duration)
in content points
Failure f -> Debug.log f (div [] [ Html.text "failure", Html.text f]) Failure f -> Debug.log f (div [] [ Html.text "failure", Html.text f])
Loading -> div [] [Html.text "loading"] Loading -> div [] [Html.text "loading"]
Empty -> div [] [Html.text "no points"] Empty -> div [] [Html.text "no points"]
canvas centre zoom width height track = canvas centre zoom width height model =
let (mintile, maxtile) = boundingTiles centre zoom width height let (mintile, maxtile) = boundingTiles centre zoom width height
-- offset is pixel difference between centre (which *should* -- offset is pixel difference between centre (which *should*
-- be the middle of the image) and actual middle of the canvas -- be the middle of the image) and actual middle of the canvas
@ -387,7 +400,7 @@ canvas centre zoom width height track =
xs = List.range mintile.x maxtile.x xs = List.range mintile.x maxtile.x
ys = List.range mintile.y maxtile.y ys = List.range mintile.y maxtile.y
epos e = Tuple.mapBoth floor floor e.pointer.clientPos epos e = Tuple.mapBoth floor floor e.pointer.clientPos
tv = ifTrack track (trackView leftedge topedge zoom) tv = ifTrack model (trackView leftedge topedge zoom)
in div [style "position" "absolute" in div [style "position" "absolute"
,style "width" (px pixWidth) ,style "width" (px pixWidth)
,style "height" (px pixHeight) ,style "height" (px pixHeight)
@ -412,11 +425,13 @@ withSwallowing m =
mapWheelDecoder = mapWheelDecoder =
D.map (withSwallowing << MapScale) (D.field "deltaY" D.float) D.map (withSwallowing << MapScale) (D.field "deltaY" D.float)
timeWheelDecoder =
D.map (withSwallowing << TimeScale) (D.field "deltaY" D.float)
viewDiv : Model -> Html Msg viewDiv : Model -> Html Msg
viewDiv model = viewDiv model =
let coord = translate model.centre (pixelsToCoord (toZoom model.zoom) (dragDelta model.drag)) let coord = translate model.centre (pixelsToCoord (toZoom model.zoom) (dragDelta model.drag))
canvasV = canvas coord (toZoom model.zoom) portalWidth portalHeight model.track canvasV = canvas coord (toZoom model.zoom) portalWidth portalHeight model
in div [ style "display" "flex" in div [ style "display" "flex"
, style "column-gap" "15px" , style "column-gap" "15px"
] ]
@ -440,12 +455,13 @@ viewDiv model =
] ]
] ]
, div [ style "display" "flex" , div [ style "display" "flex"
, Html.Events.custom "wheel" timeWheelDecoder
, style "flex-direction" "column" , style "flex-direction" "column"
, style "row-gap" "10px" , style "row-gap" "10px"
] ]
[ div [] [ ifTrack model.track cadenceView ] [ div [] [ ifTrack model cadenceView ]
, div [] [ ifTrack model.track powerView ] , div [] [ ifTrack model powerView ]
, div [] [ ifTrack model.track eleView ] , div [] [ ifTrack model eleView ]
] ]
] ]