Layout of mathematical views (iOS)

Question

I am trying to figure out the right way to encapsulate graphical information about mathematical objects. It is not simple. For example, a matrix can include square brackets around its entries, or not. Some things carry down to sub-objects -- for example, a matrix might track the font size to be used by its entries. Similarly, the font color and the background color would carry down to the entries. Other things do not carry down. For example, the entries of the matrix do not need to know whether or not the matrix has those square brackets.

Based on all of the above, I need to calculate sizes for everything, then frames. All of this can depend on the properties stored above. The size of a matrix depends on the sizes of its entries, and also on whether or not it has those brackets.

What I am having a hard time with is not the individual ways to calculate sensible frames for this or that. It is the overall organizational structure of the whole thing. How can I keep track of it all without going crazy.

One particular obstacle is worth mentioning -- for reasons I don't want to go into here, I need to calculate the sizes and frames for everything before I instantiate any actual views. So, for example, if I have a Matrix object, I need to calculate its size before I make a MatrixView. If I have an equation, I need to calculate the size of the view for the equation before I create the actual view. So I clearly need separate objects for those calculations. But I can't figure out a sensible class structure for those objects. If I put them all into a single class, I get some advantages because copying then becomes easy. But I also end up with a bloated class that contains info that is irrelevant for some objects -- such as whether or not to include those brackets around the matrix. But if I use a lot of different classes, copying properties becomes a real pain.

If it matters, this is all in Objective C, for an iOS environment. Any pointers would be greatly appreciated.

EDIT: To clarify: I have model objects that contain mathematical information and can compute the text that will be displayed. I also think it will make sense to have style sheet objects that will know the font size. Therefore, between the two, I can compute everything. This still leaves the issue of how to keep track of the resulting information. I don't want to call the "compute-your-size" methods more than necessary as they are expensive. So I have to cache some things. But where? And how do I manage that caching?

Answer 1

One way to do this that will work well in Objective-C and iOS is to use MVC as a guiding principle. You need to separate the actual data -- the terms of a polynomial, the entries in a matrix, and so on -- from the way the data is presented. This is just what MVC is good at: you'll have model objects that contain the specific equations, and view-like objects that know how to render different kinds of mathematical entities.

We often talk about MVC as an architecture for an entire application, but you can apply the same principles at smaller scales. Cocoa and Cocoa Touch do that -- witness the way that UITableView uses a delegate (which is like a controller) and a data source (which is like a model).

Anyway, if you're looking to preserve your sanity, you'll want to separate the different kinds of tasks into different kinds of classes. You won't have just one class that both represents and draws a matrix; you'll have a class that stores the data for and perhaps operates on a matrix and a class that knows how to present that data to the user.

Answer 2

I don't have experience with this directly, but I've been impressed with the MathJax implementation. It's used (among other places) in the iPython Notebook, and on StackExchange.

It's open source, so you can find it on GitHub. You'll probably want to start looking at the output formats. The interesting stuff looks like it starts around line 706, here.

Hope that helps!