Back to Questions
985
views2
comments
Resize canvas to match parent div with UI.Next
websharperui.next

I'm converting my websharper project to use UI.Next. I have a canvas element that needs to resize with the parent div element. To do this previously, I used

1
2
3
4
5
6
7
8
9
10
11

let canvasElement = Canvas [Width "10"; Height "10"]
let canvas = As<CanvasElement> canvasElement.Dom
let onResize (container : Element) =
    let view = container.Dom
    canvas.Width <- int view.ClientWidth
    canvas.Height <- int view.ClientHeight
    redraw canvas
let canvasDiv =
    Div [ canvasElement ] -< [Id "CanvasDiv"; TabIndex "1000"; Style "position:fixed; left:0; right:0; top:0; bottom:0; outline: none"]
    |>! OnAfterRender onResize
    |>! OnResize onResize

When I try the following, the afterRender event triggers but the resize event does not.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let canvasSize = Var.Create (10, 10)
let canvasWidth = canvasSize.View |> View.Map (fst >> string)
let canvasHeight = canvasSize.View |> View.Map (snd >> string)
let onResize (elt : Dom.Element) =
    canvasSize.Value <- (int elt.ClientWidth, int elt.ClientHeight)
let canvasDiv =
    divAttr [
        attr.id "CanvasDiv"
        attr.tabindex "1000"
        attr.style "position:fixed; left:0; top:0; right:0; bottom:0; outline:none"
        on.resize (fun elt _ -> onResize elt)
        on.afterRender onResize
    ] [
        canvasAttr [
            attr.widthDyn canvasWidth
            attr.heightDyn canvasHeight
        ] []
    ]

These event handlers are represented in Javascript as

1
2
3
4
5
6
7
8

AttrModule.Handler("resize",function(evt)
{
    return function()
    {
        return onResize(evt);
    };
}),
AttrModule.OnAfterRender(onResize)])

I'm using WebSharper 3.6.2.220 and UI.Next 3.6.2.196. What can I do to fix the resize event handler and is there a better way to acheive this goal?

I thought views on the div width and height would be nice, but couldn't think of a way to attach these without also setting their values.

Regards, cadull

.

Is that all the original code? Because based on what I can find by searching around and fiddling a bit, it shouldn't work; the resize event only fires on the window, not elements.

By on 11/25/2015 9:27 AM ()

Thanks Loïc. Testing my original code, it fails to resize the canvas also. Rather than relying on the window resize event as the only source of change, I'll try checking the required size before each render. The equivalent of

1

JS.SetInterval (fun () -> onResize canvasDiv.Dom) 15 |> ignore

Regards, cadull

By on 11/25/2015 2:09 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper