Is it possible to apply a mask on a view?

[arthur-fontaine]

Everything is in the title, I'd like to apply an (animated) mask on a view to only see a part of it. Is it currently possible with Floem?

[jrmoulton]

This may not work perfectly especially when using vger. But this might work for you us case

https://docs.rs/floem/latest/floem/context/struct.PaintCx.html#method.clip

[arthur-fontaine]

I managed to get the expected result by wrapping the view in a container as you suggested and shifting it with inset_left, but it feels more like a workaround. Is this what you meant? I tried with hide, but it hides the view too.

fn app_view(_: WindowId) -> impl IntoView {
    let v =
        empty().style(|s| s.size(100, 100).background(Color::from_rgb8(10, 10, 10)));
    let v_id = v.id();

    let hidden_container = container(v).style(|s| s.absolute().inset_left(-9999));

    let c = canvas(move |cx, _| {
        let shape =
            RoundedRect::from_origin_size((0.0, 0.0), (150.0, 150.0), 9999.0);
        cx.clip(&shape);

        let rect = Rect::from_origin_size((50.0, 50.0), (100.0, 100.0));
        cx.fill(&rect, css::BLUE, 0.0);

        cx.paint_view(v_id);

        cx.clear_clip();
        let rect = Rect::from_origin_size((125.0, 125.0), (100.0, 100.0));
        cx.fill(&rect, css::RED, 0.0);
    })
    .style(|s| s.size_full().absolute().inset_left(400).inset_top(400));

    (hidden_container, c)
}

[jrmoulton]

No I mean create a struct and implement the View trait.

[arthur-fontaine]

I am sorry, but after trying a lot of things, I still don't get your point.

• either I return (masked_view, canvas) and it shows both squares
• either I return just canvas and it shows nothing

I tried to

• use masked_view.request_all() to "force" rendering (?), but it still didn't show
• use canvas.set_children_ids(masked_view.id())
• use a custom component named SomeView instead of empty()... (see at the bottom of my draft code)

Here is my draft code:

use floem::{
   Application, IntoView, View, ViewId,
   context::PaintCx,
   kurbo::RoundedRect,
   prelude::palette::css,
   views::{Decorators, empty},
   window::{WindowConfig, WindowId},
};

pub fn launch() {
   Application::new()
       .window(app_view, Some(WindowConfig::default()))
       .run();
}

fn app_view(_: WindowId) -> impl IntoView {
   let v = empty().style(|s| s.size(100, 100).background(css::BLACK));

   let m = masked_view(
       v.id(),
       RoundedRect::from_origin_size((0.0, 0.0), (150.0, 150.0), 9999.0),
   )
   .into_view()
   .style(|s| s.size_full().absolute().inset_left(400).inset_top(400));

   m
}

struct MaskedView {
   id: ViewId,
   inner: ViewId,
   clip_shape: RoundedRect,
}

fn masked_view(inner: ViewId, clip_shape: RoundedRect) -> MaskedView {
   let id = ViewId::new();
   id.set_children_ids(vec![inner]);
   id.request_all();
   inner.request_all();

   MaskedView {
       id,
       inner,
       clip_shape,
   }
}

impl View for MaskedView {
   fn id(&self) -> ViewId {
       self.id
   }

   fn paint(&mut self, cx: &mut PaintCx) {
       self.id.request_all();
       self.inner.request_all();
       cx.clip(&self.clip_shape);
       cx.paint_view(self.inner);
       cx.clear_clip();
   }
}

struct SomeView {
   id: ViewId,
}

fn some_view() -> SomeView {
   SomeView { id: ViewId::new() }
}

impl View for SomeView {
   fn id(&self) -> ViewId {
       self.id
   }

   fn paint(&mut self, cx: &mut PaintCx) {
       cx.fill(
           &Rect::from_origin_size((0.0, 0.0), (100.0, 100.0)),
           css::RED,
           0.0,
       );
   }
}

What I am doing wrong?

[jrmoulton]

use floem::{
    Application, IntoView, View, ViewId,
    context::PaintCx,
    kurbo::RoundedRect,
    prelude::palette::css,
    views::{Decorators, empty},
    window::{WindowConfig, WindowId},
};

pub fn launch() {
    Application::new()
        .window(app_view, Some(WindowConfig::default()))
        .run();
}

fn app_view(_: WindowId) -> impl IntoView {
    let v = empty().style(|s| s.size(100, 100).background(css::BLACK));

    masked_view(
        v,
        RoundedRect::from_origin_size((0.0, 0.0), (150.0, 150.0), 9999.0),
    )
    .into_view()
    .style(|s| s.size_full().absolute().inset_left(400).inset_top(400))
}

struct MaskedView {
    id: ViewId,
    inner_id: ViewId,
    clip_shape: RoundedRect,
}

fn masked_view(inner: impl IntoView, clip_shape: RoundedRect) -> MaskedView {
    let id = ViewId::new();
    let inner = inner.into_view();
    let inner_id = inner.id();
    id.set_children([inner]);
    id.request_all();
    inner_id.request_all();

    MaskedView {
        id,
        inner_id,
        clip_shape,
    }
}

impl View for MaskedView {
    fn id(&self) -> ViewId {
        self.id
    }

    fn paint(&mut self, cx: &mut PaintCx) {
        cx.clip(&self.clip_shape);
        cx.paint_view(self.inner_id);
        cx.clear_clip();
    }
}

fn main() {
    launch();
}

[arthur-fontaine]

Thanks a lot!!!

I see that the main difference between your code and mine is the usage of set_children instead of set_children_ids. Thank you, I will look at the difference between both functions.