Month: February 2011

WPF or Silverlight PathBuilder

Every once in a while you find yourself needing to draw some type of a shape dynamically. One easy example is arrows connecting visuals that are movable. In some cases you can simply place arrows where you expect the visuals to be but in others the visuals can move around in non-fixed ways. For those scenarios you need to create lines dynamically.

path_builder_example

In the composite screenshots above I am showing a scenario where I am able to drag the nodes around free form and I need the arrows to continuously update as the visual is moving to show relationships. You can imagine various other scenarios where you would need data driven shapes.

I have created a simple API for creating Path data in WPF or Silverlight. It is based on the idea that you can bind a string to the Data property of a Path object and all you need to do is to produce valid Path Data syntax in a string and you get a dynamic shape.

public enum SweepDirection
{
    Clockwise,
    CounterClockwise
}

public interface IPath
{
    string Data { get;}
}

public static class PathBuilder 
{
    private enum DrawCommand
    {
        Start,
        Move,
        Line,
        HorizontalLine,
        VerticalLine,
        CubicBezierCurve,
        QuadraticBezierCurve,
        SmoothCubicBezierCurve,
        SmoothQuadraticBezierCurve,
        EllipticalArc,
        Close
    }

    public static IPath Start()
    {
        return new Path(DrawCommand.Start, "");
    }

    private class Path : IPath
    {
        private DrawCommand lastCommand = DrawCommand.Start;
        private string data;
        public Path(DrawCommand command, string data)
        {
            this.lastCommand = command;
            this.data = data;
        }

        public string Data
        {
            get { return this.data; }
        }

        public DrawCommand Command
        {
            get { return this.lastCommand; }
        }
    }

    public static IPath Move(this IPath path, Point p)
    {
        var prefix = PathBuilder.AppendCommandPrefix(((Path)path).Command, DrawCommand.Move);
        return new Path(
            DrawCommand.Move, 
            path.Data + prefix + string.Format(" {0} {1}", p.X, p.Y));
    }

    public static IPath DrawLine(this IPath path, Point end)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.Line);
        return new Path(
            DrawCommand.Line, 
            path.Data + prefix + string.Format(" {0} {1}", end.X, end.Y));
    }

    public static IPath DrawHorizontalLine(this IPath path, double x)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.HorizontalLine);
        return new Path(
            DrawCommand.HorizontalLine,
            path.Data + prefix + string.Format(" {0}", x));
    }

    public static IPath DrawVerticalLine(this IPath path, double y)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.VerticalLine);
        return new Path(
            DrawCommand.VerticalLine,
            path.Data + prefix + string.Format(" {0}", y));
    }

    public static IPath DrawCubicBezierCurve(this IPath path, Point controlPoint1, Point controlPoint2, Point end)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.CubicBezierCurve);
        return new Path(
            DrawCommand.CubicBezierCurve,
            path.Data + prefix + string.Format(" {0} {1} {2} {3} {4} {5}",
                controlPoint1.X,
                controlPoint1.Y,
                controlPoint2.X,
                controlPoint2.Y,
                end.X,
                end.Y));
    }

    public static IPath DrawQuadraticBezierCurve(this IPath path, Point controlPoint, Point end)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.QuadraticBezierCurve);
        return new Path(
            DrawCommand.QuadraticBezierCurve,
            path.Data + prefix + string.Format(" {0} {1} {2} {3}",
                controlPoint.X,
                controlPoint.Y,
                end.X,
                end.Y));
    }

    public static IPath DrawSmoothCubicBezierCurve(this IPath path, Point controlPoint, Point end)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.SmoothCubicBezierCurve);
        return new Path(DrawCommand.SmoothCubicBezierCurve,
            path.Data + prefix + string.Format(" {0} {1} {2} {3}",
                controlPoint.X,
                controlPoint.Y,
                end.X,
                end.Y));
    }

    public static IPath DrawSmoothQuadraticBezierCurve(this IPath path, Point controlPoint, Point end)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.SmoothQuadraticBezierCurve);
        return new Path(
            DrawCommand.SmoothQuadraticBezierCurve,
            path.Data + prefix + string.Format(" {0} {1} {2} {3}",
                controlPoint.X,
                controlPoint.Y,
                end.X,
                end.Y));
    }

    public static IPath DrawEllipticalArc(this IPath path, Size size, double rotationAngle, bool isLargeArc, SweepDirection sweepDirection, Point end)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.EllipticalArc);
        return new Path(
            DrawCommand.EllipticalArc,
            path.Data + prefix + string.Format(" {0} {1} {2} {3} {4} {5} {6}",
                size.Width,
                size.Height,
                rotationAngle,
                isLargeArc ? 1 : 0,
                sweepDirection == SweepDirection.Clockwise ? 0 : 1,
                end.X,
                end.Y));
    }

    public static IPath Close(this IPath path)
    {
        var prefix = AppendCommandPrefix(((Path)path).Command, DrawCommand.Close);
        return new Path(DrawCommand.Close, path.Data + prefix);
    }

    private static string AppendCommandPrefix(DrawCommand last, DrawCommand command)
    {
        if (last != command)
        {
            char c;
            switch (command)
            {
                case DrawCommand.Move:
                    if (last == DrawCommand.Move)
                        throw new InvalidOperationException("Cannot have two move commands in a row.");

                    c = 'M';
                    break;
                case DrawCommand.Line:
                    c = 'L';
                    break;
                case DrawCommand.HorizontalLine:
                    c = 'H';
                    break;
                case DrawCommand.VerticalLine:
                    c = 'V';
                    break;
                case DrawCommand.CubicBezierCurve:
                    c = 'C';
                    break;
                case DrawCommand.QuadraticBezierCurve:
                    c = 'Q';
                    break;
                case DrawCommand.SmoothCubicBezierCurve:
                    c = 'S';
                    break;
                case DrawCommand.SmoothQuadraticBezierCurve:
                    c = 'T';
                    break;
                case DrawCommand.EllipticalArc:
                    c = 'A';
                    break;
                case DrawCommand.Close:
                    if (last == DrawCommand.Close)
                        throw new InvalidOperationException("Cannot have two Close commands in a row.");

                    c = 'Z';
                    break;
                default:
                    throw new NotSupportedException();
            }

            return string.Format(CultureInfo.InvariantCulture, " {0}", c);
        }

        return string.Empty;
    }
}

 

Here is a snippet for drawing the arrows like I am doing above:

var pathData = PathBuilder.Start()
    .Move(start)
    .DrawCubicBezierCurve(cp1, cp2, end)
    .Move(end)
    .DrawLine(ap1)
    .Move(end)
    .DrawLine(ap2)
    .Data;

It’s a fluent interface that returns an immutable IPath for each draw call so you can reuse parts of paths and branch shapes without having to redraw the entire thing every time. I will leave it up to you to figure out where to put all of your points but the above snippet draws an arrow.

I am doing this code in my ViewModel in a string Property based on the state of my model and I am actually rendering it by Binding that to the Data property on a Path object. The related XAML snippet looks like this:

<Path 
    Data="{Binding PathData}" 
    Stroke="Black" 
    StrokeThickness="1" />

As strange as it seems the Data property can accept a string and when bound will redraw the path as the bound property changes.

List<T> is dead, long live LINQ

Well, ok, maybe not completely dead. It has it’s uses but for the most part I find myself using an actual list less and less. I do end up using ObservableCollection<T> for ViewModels still, of course, but that can’t be avoided.

I do find myself slowly banishing it from my daily coding habits however, thanks to LINQ. I am finding that the covariant interface IEnumerable<T> is almost always a better choice as a return value for methods and properties and with the help of the higher order set functions provided along with LINQ there is nothing you can’t do without List<T> that you could have done with it.

Also, I would like to mention that when I am talking about LINQ I am talking exclusively about the extension methods found in System.Linq.Enumerable not the actual internal DSL syntax in C# / VB. I almost never use that syntax since it can’t express all of the functions I need and is sometimes hard to debug.

I did have to add one extension method to help ease general use of LINQ however.

public static class EnumerableExtensions
{
    public static IEnumerable<T> ToEnumerable<T>(this T @object)
    {
        if (@object == null)
            return System.Linq.Enumerable.Empty<T>();

        var enumerable = @object as IEnumerable;
        if (enumerable == null)
            return new[] { (T)@object };

        return enumerable.Cast<T>();
    }
}

This allows you to ensure than any object can be used as an IEnumerable<T>. With this in hand you can replace any method on List<T>. Here is an example of a bunch of methods on List<T> and their equivalent LINQ translations.

var a = 1;
var b = 2;
var c = 3;

var list = new List<int>();
var set = Enumerable.Empty<int>();

list.Add(a);
set = set.Concat(a.ToEnumerable());

list.Remove(a);
set = set.Where(i => i != a);

list.AddRange(new[] { a, b });
set = set.Concat(a.ToEnumerable()).Concat(b.ToEnumerable());

list.Sort();
set = set.OrderBy(i => i);

list.Contains(a);
set.Any(i => i == a);

var count1 = list.Count;
var count2 = set.Count();

list.FindAll(i => i == a);
set.Where(i => i == a);

list.IndexOf(a);
set.TakeWhile(i => i == a).Count();

list.FindLast(i => i == a);
set.Last(i => i == a);

list.GetRange(0, 2);
set.Skip(0).Take(2);

list.Insert(1, c);
set = set.Take(1).Concat(c.ToEnumerable()).Concat(set.Skip(1));

list.Reverse();
set = set.Reverse();

list.TrueForAll(i => i == 0);
set.All(i => i == 0);

Note that in order to get some of the features of List<T> you have to compose various LINQ functions together, such as Insert. At first this may seem overly verbose but the benefit is an incredible flexibility. There is nearly no limit on what you can express with LINQ because of this composability (also you could create extensions that simply wrap up the complex composition with a neater signature). List<T> has a few more methods that I will leave up to you to translate but LINQ has many more functions and function composition possibilities that I would highly recommend discovering.

Executing the above code and printing list and set results in this output.

list: { 2 3 1 }
set: { 2 3 1 }

When you use LINQ your set is immutable at every point in time, which is very helpful in case you would like to try to use the Parallel Extensions (aka PLINQ). One other interesting aspect of the LINQ extensions is deferred execution. This means that none of my set operations above are even executed until I iterate over the set in my print function. This allows me to change the value of ‘a’, reiterate and receive a different result. This can be confusing if you’re unaware of it but it can be a huge win if you understand it well. This is all possible because of the functional nature of LINQ and (as best as I can understand) is an example of a Monad in .NET. And, of course, coroutines in C# compliment LINQ very nicely as well (aka yield return). I think it would be very interesting to experiment with a language where every variable is essentially treated as a set, NULL is not possible but empty sets are. An object is simply a set of 1. It would be interesting.

Another very cool aspect of LINQ is Lambda Expressions and how they are related to Expression Trees and the DLR. It’s extremely powerful and they are intimately tied together.

Also, do check out IEnumerable<T>’s mirrored twin: IObservable<T>.

Children of Men

Recently, I subscribed to audible.com. My thought was that I could finally listen to all of the books I have been wanting to read but have not had time. I have been listening to my audio books on my phone while driving, while running errands and while waiting for various things. I am a fan of audible and have definitely gotten my moneys worth so far.

I recently finished Children of Men, which was also a fantastic movie from 2006. The movie was both technically and artistically excellent. The most notable attribute of the movie for me was how they would shoot entire scenes several  minutes long without any cuts. It was an excellent sci-fi movie.

 

One other notable aspect of this movie is that it is one of the few book-to-movie translations that I would consider to be better than the actual book. It’s not to say that the book is not good but I think that by taking the movie in a completely different direction it made it both more exciting for the screen and maybe even more provocative; with the various characters and background activities. I did really enjoy the classic British understatement and muted sense of honor in the book, the ending wasn’t quite as bleak either.

In summary watch the movie if you haven’t but the book you should pick up if you really liked the movie and want some more.

Farewell Bob Pappas

Today was Bob‘s last day at Microsoft. He was the project manager of Sketch Flow and his contribution will be remembered. Bob leaves to join Apple where he will work on iPhoto and he will be replaced by Dave Carley as project manager of Sketch Flow. For those who didn’t know Sketch Flow is developed almost exclusively here in Minnesota.

Farewell Bob and good luck Dave!

IMAG0143

This is a photo of some of the Microsoft Twin Cities Development Center bowling at Bryant Lake Bowl. Bob stands at the left.