fn view(model: &Model) -> Node<Msg> {
    log::debug!("view");
    div![
        div![
            canvas![
                el_ref(&model.canvas),
                attrs! { At::Id => "fractal-canvas", At::Width => "800", At::Height => "600"},
                style! {St::BackgroundColor => "white"},
                //  update the pointer location
                ev(Ev::PointerMove, |event| {
                    let pointer_event = event.dyn_into::<PointerEvent>().unwrap();
                    let target = pointer_event
                        .target()
                        .unwrap()
                        .dyn_into::<HtmlElement>()
                        .unwrap();

                    Msg::CursorCoordsCanged(
                        pointer_event.client_x() - target.offset_left(),
                        pointer_event.client_y() - target.offset_top(),
                    )
                }),
                ev(Ev::PointerDown, |_| Msg::CursorDown),
                ev(Ev::PointerUp, |_| Msg::CursorUp),
            ],
            div![
                attrs! {At::Id => "coords"},
                format!("Canvas coords: {:?}", model.cursor_coords)
            ],
            div![
                attrs! {At::Id => "fractal-coords"},
                IF!(not(model.fractal_coords.is_none()) => format!(
                    "Fractal coords: X: {}, Y: {}",
                    model.fractal_coords.unwrap()[0], model.fractal_coords.unwrap()[1]
                )),
                IF!(model.fractal_coords.is_none() => "Fractal coords: No fractal being rendered")
            ],
        ],
        div![
            view_menu(model.current_animation_status == FractalAnimationStatus::Animating),
            view_config(&model.current_config),
            IF!(
                model.current_animation_status == FractalAnimationStatus::Animating => button![
                "Pause", ev(Ev::Click, |_| Msg::PauseClicked)]
            ),
            IF!(
                model.current_animation_status == FractalAnimationStatus::Paused => button![
                "Resume", ev(Ev::Click, |_| Msg::ResumeClicked)]
            ),
            IF!(
                model.current_animation_status != FractalAnimationStatus::Animating => div![
                    button!["Start a new fractal", ev(Ev::Click, |_| Msg::RunClicked)]
                ]
            ),
        ]
    ]
}
/// Renders/re-renders the HTML side of the UI
///
/// Note that updates to the canvas are handled by the currently ongoing animation.
Renders/re-renders the HTML side of the UI
Note that updates to the canvas are handled by the currently ongoing animation.
Renders / re - renders the HTML side of the UI Note that updates to the canvas are handled by the currently ongoing animation .
fn view(model: &Model) -> Node<Msg> {
    log::debug!("view");
    div![
        div![
            canvas![
                el_ref(&model.canvas),
                attrs! { At::Id => "fractal-canvas", At::Width => "800", At::Height => "600"},
                style! {St::BackgroundColor => "white"},
                //  update the pointer location
                ev(Ev::PointerMove, |event| {
                    let pointer_event = event.dyn_into::<PointerEvent>().unwrap();
                    let target = pointer_event
                        .target()
                        .unwrap()
                        .dyn_into::<HtmlElement>()
                        .unwrap();
                    Msg::CursorCoordsCanged(
                        pointer_event.client_x() - target.offset_left(),
                        pointer_event.client_y() - target.offset_top(),
                    )
                }),
                ev(Ev::PointerDown, |_| Msg::CursorDown),
                ev(Ev::PointerUp, |_| Msg::CursorUp),
            ],
            div![
                attrs! {At::Id => "coords"},
                format!("Canvas coords: {:?}", model.cursor_coords)
            ],
            div![
                attrs! {At::Id => "fractal-coords"},
                IF!(not(model.fractal_coords.is_none()) => format!(
                    "Fractal coords: X: {}, Y: {}",
                    model.fractal_coords.unwrap()[0], model.fractal_coords.unwrap()[1]
                )),
                IF!(model.fractal_coords.is_none() => "Fractal coords: No fractal being rendered")
            ],
        ],
        div![
            view_menu(model.current_animation_status == FractalAnimationStatus::Animating),
            view_config(&model.current_config),
            IF!(
                model.current_animation_status == FractalAnimationStatus::Animating => button![
                "Pause", ev(Ev::Click, |_| Msg::PauseClicked)]
            ),
            IF!(
                model.current_animation_status == FractalAnimationStatus::Paused => button![
                "Resume", ev(Ev::Click, |_| Msg::ResumeClicked)]
            ),
            IF!(
                model.current_animation_status != FractalAnimationStatus::Animating => div![
                    button!["Start a new fractal", ev(Ev::Click, |_| Msg::RunClicked)]
                ]
            ),
        ]
    ]
}
fn view ( model : & Model ) -> Node < Msg > { log :: debug ! ( " " ) ; div ! [ div [ canvas [ el_ref ( model canvas ) attrs { At Id " " At Width " " At Height " " } style { St BackgroundColor " " } //  update the pointer location ev ( Ev PointerMove event { let pointer_event event dyn_into PointerEvent ( ) unwrap ( ) let target pointer_event target ( ) unwrap ( ) dyn_into HtmlElement ( ) unwrap ( ) Msg CursorCoordsCanged ( pointer_event client_x ( ) target offset_left ( ) pointer_event client_y ( ) target offset_top ( ) ) } ) ev ( Ev PointerDown Msg CursorDown ) ev ( Ev PointerUp Msg CursorUp ) ] div [ attrs { At Id " " } format ( " " model cursor_coords ) ] div [ attrs { At Id " " } IF ( not ( model fractal_coords is_none ( ) ) format ( " " model fractal_coords unwrap ( ) [ 0 ] model fractal_coords unwrap ( ) [ 1 ] ) ) IF ( model fractal_coords is_none ( ) " " ) ] ] div [ view_menu ( model current_animation_status FractalAnimationStatus Animating ) view_config ( model current_config ) IF ( model current_animation_status FractalAnimationStatus Animating button [ " " ev ( Ev Click Msg PauseClicked ) ] ) IF ( model current_animation_status FractalAnimationStatus Paused button [ " " ev ( Ev Click Msg ResumeClicked ) ] ) IF ( model current_animation_status FractalAnimationStatus Animating div [ button [ " " ev ( Ev Click Msg RunClicked ) ] ] ) ] ] }
Renders/re-renders the HTML side of the UI
Note that updates to the canvas are handled by the currently ongoing animation.
Renders / re - renders the HTML side of the UI Note that updates to the canvas are handled by the currently ongoing animation .
model
&Model