Proper disposal of RX subscriptions - silverlight

Question

I'm new to Reactive Extensions, and this is what I've come up with to do a Popup Toaster Notification. When the mouse goes over the toaster, the opacity is brought back to 100%. Otherwise, it fade out gradually.
The code works, but I'm not entirely confident I'm not leaking resources, especially in the mouseOut subscription. In addition, I'm not sure if this is the best way to implement this functionality.
Any critiques, tips would be appreciated.
private void rxPop()
{
Rectangle toaster = (Rectangle)this.FindName("toaster1");
Thickness newToasterPosition = new Thickness(
toaster.Margin.Left, toaster.Margin.Top,
toaster.Margin.Right, toaster.Margin.Bottom + toaster.Height);
/* Animations */
Storyboard slideInAnimation = slide(toaster,
newToasterPosition,
TimeSpan.FromMilliseconds(450));
Storyboard fadeInAnimation = animateOpacity(toaster, 1.0, TimeSpan.FromMilliseconds(150));
Storyboard fadeOutAnimation = animateOpacity(toaster, 0.0, TimeSpan.FromSeconds(3));
/* Events */
var mouseEnter = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>
(h => toaster.MouseEnter += h,
h => toaster.MouseEnter -= h);
var mouseOut = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>
(h => toaster.MouseLeave += h,
h => toaster.MouseLeave -= h);
var slideInCompleted = Observable.FromEventPattern<EventHandler, EventArgs>(
h => slideInAnimation.Completed += h,
h => slideInAnimation.Completed -= h);
var fadeOutCompleted = Observable.FromEventPattern<EventHandler, EventArgs>(
h => fadeOutAnimation.Completed += h,
h => fadeOutAnimation.Completed -= h);
// slideIn then fadeOut
slideInCompleted.Subscribe(e => fadeOutAnimation.Begin());
var mouseEnterSubscription = mouseEnter
.ObserveOnDispatcher()
.Do(a =>
{
fadeOutAnimation.Pause();
fadeInAnimation.Begin();
slideInAnimation.Pause();
mouseOut.Do(
b =>
{
fadeOutAnimation.Begin();
fadeInAnimation.Stop();
slideInAnimation.Resume();
}).Subscribe();
})
.Subscribe();
fadeOutCompleted.Subscribe((e) => mouseEnterSubscription.Dispose());
slideInAnimation.Begin();
}
Ideally, I would have liked to express the events in the following manner:
slideIn then fadeOut
unless mouseEnter
then fadeIn , slideIn.Pause
until mouseLeave
then fadeOut.Begin and slideIn.Resume
What's the closest way to do this in RX?
UPDATE #1
*UPDATE #2* (Cleaning up Subscribe())
Here's a somewhat cleanear attempt.
protected CompositeDisposable _disposables = new CompositeDisposable();
private void rxPop()
{
IDisposable mouseEnterSubscription = null;
/* Business logic: slideIn then fadeOut then remove from visual tree */
_disposables.Add(
slideInAnimation
.BeginUntilDone()
.Select(slideInCompletedEvent =>
fadeOutAnimation.BeginUntilDone())
.Switch()
.Subscribe(fadeOutAnimationCompletedEvent =>
{
mouseEnterSubscription.Dispose();
// remove from visual tree
(toaster.Parent as Panel).Children.Remove(toaster);
}));
/* Business logic: mouseEnter/mouseLeave should pause/restart animations */
mouseEnterSubscription = mouseEnter
.ObserveOnDispatcher()
.Do(mouseEnterEventArgs =>
{
fadeOutAnimation.Pause();
fadeInAnimation.Begin();
slideInAnimation.Pause();
})
.Select(e => mouseOut)
.Switch()
.Do(mouseLeaveEventArgs =>
{
fadeOutAnimation.Begin();
fadeInAnimation.Stop();
slideInAnimation.Resume();
})
.Subscribe();
}
public static class RxExtensions
{
public static IObservable<EventPattern<EventArgs>> BeginUntilDone(this Storyboard sb)
{
var tmp = Observable.FromEventPattern(
h => sb.Completed += h,
h => sb.Completed -= h);
sb.Begin();
return tmp;
}
}
My questions are:
Is ObserveOnDispatcher() done correctly?
Does the Switch() dispose the previous IObservable for me?
I struggle to translate the above into LINQ query syntax
/* Business Logic */
var showToast =
// Start by sliding in
from slideInComplete in slideIn.BeginObservable()
where slideInComplete
// Then in parallel, fadeOut as well as wait for mouseEnter
from fadeOutComplete in fadeOut.BeginObservable()
from enter in mouseEnter
// ... I'm lost here.
// ... how do I express
// ..... mouseEnter should pause fadeOut?
select new Unit();

Answer 1

Well, first off, you're leaking IDisposables all over the place - each one of those Subscribe calls returns an IDisposable, which are just going out of scope, not being disposed properly. That part is easily fixed, however, using some of the IDisposable containers in the Rx lib:
(snippets from the test harness I threw together around your example code)
// new fields
// A serial disposable lets you wrap one disposable
// such that changing the wrapped disposable autocalls
// Dispose on the previous disposable
protected SerialDisposable _resubscriber;
// A composite disposable lets you track/dispose a whole
// bunch of disposables at once
protected CompositeDisposable _disposables;
// no real need to do this here, but might as well
protected void InitializeComponent()
{
_disposables = new CompositeDisposable();
_resubscriber = new SerialDisposable();
// misc
this.Unloaded += (o,e) =>
{
if(_disposables != null) _disposables.Dispose();
if(_resubscriber != null) _resubscriber.Dispose();
};
Then later on in your queries, wrap all Subscribe calls (except one, see below) in something like this:
// slideIn then fadeOut
_disposables.Add(slideInCompleted.Subscribe(e => fadeOutAnimation.Begin()));
The one exception being the MouseOut "canceller":
.Do(a =>
{
fadeOutAnimation.Pause();
fadeInAnimation.Begin();
slideInAnimation.Pause();
_resubscriber.Disposable = mouseOut.Do(
b =>
{
fadeOutAnimation.Begin();
fadeInAnimation.Stop();
slideInAnimation.Resume();
}).Subscribe();
})
Now...as for this:
slideIn then fadeOut
unless mouseEnter
then fadeIn , slideIn.Pause
until mouseLeave
then fadeOut.Begin and slideIn.Resume
That I'll have to think about...I think there's a more...rx way of doing it, but I'd have to ponder it a bit. Definitely handle the IDisposable cleanup, tho!
(will edit this if I can come up with something for the second bit)
EDIT: Ooh, think I've got something promising...
First off, let's rig up a way to translate Storyboard start/completes into an IObservable:
public static class Ext
{
public static IObservable<bool> BeginObservable(this Storyboard animation)
{
var sub = new BehaviorSubject<bool>(false);
var onComplete = Observable.FromEventPattern<EventHandler, EventArgs>(
h => animation.Completed += h,
h => animation.Completed -= h);
IDisposable subscription = null;
subscription = onComplete.Subscribe(e =>
{
Console.WriteLine("Animation {0} complete!", animation.Name);
sub.OnNext(true);
if(subscription != null)
subscription.Dispose();
});
Console.WriteLine("Starting animation {0}...", animation.Name);
animation.Begin();
return sub;
}
}
Basically, this sets up a "Start Animation, and signal us true when it's done" sequence...on to the good part!
So let's assume you've got the following Storyboards defined:
fadeIn: Animates Opacity to 1.0
fadeOut: Animates Opacity to 1.0
slideIn: Animates Margin to "in" value
slideOut: Animates Margin to "out" value
And these observables (slight name tweaks from your code):
mouseEnter: => MouseEnter event
mouseOut: => MouseLeave event
You can set up an IObservable that carries the actual sequence thusly:
var showToast =
// Start this mess on a "mouse enter" event
from enter in mouseEnter
// Start (in parallel) and wait until the fadeIn/slideIn complete
from fadeInComplete in fadeIn.BeginObservable()
from slideInComplete in slideIn.BeginObservable()
where fadeInComplete && slideInComplete
// Until you see a "mouse out" event
from exit in mouseOut
// Then start (in parallel) and wait until the fadeOut/slideOut complete
from fadeOutComplete in fadeOut.BeginObservable()
from slideOutComplete in slideOut.BeginObservable()
where fadeOutComplete && slideOutComplete
// And finally signal that this sequence is done
// (we gotta select something, but we don't care what,
// so we'll select the equivalent of "nothing" in Rx speak)
select new Unit();
EDIT EDIT: Here's the full Test rig I used, maybe you can port to your needs:
void Main()
{
var window = new Window();
var control = new MyControl();
window.Content = control;
window.Show();
}
public class MyControl : UserControl
{
protected DockPanel _root;
protected Rectangle _toaster;
protected CompositeDisposable _disposables;
protected Thickness _defaultToasterPosition = new Thickness(10, -60, 10, 10);
public MyControl()
{
this.InitializeComponent();
}
protected void InitializeComponent()
{
_disposables = new CompositeDisposable();
_root = new DockPanel();
_toaster = new Rectangle();
_toaster.SetValue(Rectangle.NameProperty, "toaster1");
_toaster.Fill = Brushes.Red;
_toaster.Stroke = Brushes.Black;
_toaster.StrokeThickness = 3;
_toaster.Width = 50;
_toaster.Height = 50;
_toaster.Opacity = 0.1;
DockPanel.SetDock(_toaster, Dock.Bottom);
_toaster.Margin = _defaultToasterPosition;
rxPop();
_root.Children.Add(_toaster);
this.Content = _root;
this.Unloaded += (o,e) =>
{
if(_disposables != null) _disposables.Dispose();
};
}
private void rxPop()
{
var toaster = (Rectangle)this.FindName("toaster1") ?? _toaster;
var defaultToasterPosition = toaster.Margin;
var newToasterPosition = new Thickness(
defaultToasterPosition.Left, defaultToasterPosition.Top,
defaultToasterPosition.Right, defaultToasterPosition.Bottom + toaster.Height);
/* Animations */
var slideIn = slide(toaster, newToasterPosition, TimeSpan.FromMilliseconds(450));
var slideOut = slide(toaster, defaultToasterPosition, TimeSpan.FromMilliseconds(450));
var fadeIn = animateOpacity(toaster, 1.0, TimeSpan.FromMilliseconds(150));
var fadeOut = animateOpacity(toaster, 0.1, TimeSpan.FromSeconds(3));
/* Events */
var mouseEnter = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>
(h => toaster.MouseEnter += h,
h => toaster.MouseEnter -= h);
var mouseOut = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>
(h => toaster.MouseLeave += h,
h => toaster.MouseLeave -= h);
var showToast =
// Start this mess on a "mouse enter" event
from enter in mouseEnter
// Start (in parallel) and wait until the fadeIn/slideIn complete
from fadeInComplete in fadeIn.BeginObservable()
from slideInComplete in slideIn.BeginObservable()
where fadeInComplete && slideInComplete
// Until you see a "mouse out" event
from exit in mouseOut
// Then start (in parallel) and wait until the fadeOut/slideOut complete
from fadeOutComplete in fadeOut.BeginObservable()
from slideOutComplete in slideOut.BeginObservable()
where fadeOutComplete && slideOutComplete
// And finally signal that this sequence is done
// (we gotta select something, but we don't care what,
// so we'll select the equivalent of "nothing" in Rx speak)
select new Unit();
_disposables.Add(showToast.Subscribe());
}
private Storyboard slide(Rectangle rect, Thickness newPosition, TimeSpan inTime)
{
var sb = new Storyboard();
sb.Duration = inTime;
Storyboard.SetTarget(sb, rect);
Storyboard.SetTargetProperty(sb, new PropertyPath(Rectangle.MarginProperty));
var path = new ThicknessAnimation(newPosition, inTime);
sb.Children.Add(path);
return sb;
}
private Storyboard animateOpacity(Rectangle rect, double newOpacity, TimeSpan inTime)
{
var sb = new Storyboard();
sb.Duration = inTime;
Storyboard.SetTarget(sb, rect);
Storyboard.SetTargetProperty(sb, new PropertyPath(Rectangle.OpacityProperty));
var path = new DoubleAnimation(newOpacity, inTime);
sb.Children.Add(path);
return sb;
}
}
public static class Ext
{
public static IObservable<bool> BeginObservable(this Storyboard animation)
{
var sub = new BehaviorSubject<bool>(false);
var onComplete = Observable.FromEventPattern<EventHandler, EventArgs>(
h => animation.Completed += h,
h => animation.Completed -= h);
IDisposable subscription = null;
subscription = onComplete.Subscribe(e =>
{
Console.WriteLine("Animation {0} complete!", animation.Name);
sub.OnNext(true);
if(subscription != null)
subscription.Dispose();
});
Console.WriteLine("Starting animation {0}...", animation.Name);
animation.Begin();
return sub;
}
}