Arrows (and labels)

2 replies [Last post]
shaffer
shaffer's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 2019

We may be reaching the point where JSAV needs to add support for some drawing primitives. So far we have gotten by with a combination of DOM elements and direct — but heavily managed — support for specific data structures. (The array object is the first one so far, with trees coming in Version 0.4.)

But there are lots of times when an AV developer will want to draw an arrow to something. One example just came up with our Shellsort proficiency exercise. I want to draw an arrow pointing at one of the array cells as a way of signaling something to the user. For now, Ville has taken the approach of adding a new feature to the array to let me do this. But I don’t know how far we should go in this direction of adding such features to the data structures layout. An alternative approach is to have the ability to specify an arrow directly. This gives more flexibility. It also has the disadvantage of being more "low level", perhaps putting greater demands on the AV developer than would be required if some good methods are added to the various data structure objects. This particular example could go either way.

Here are some ideas on adding support for drawing arrows.

First, we need to define various attributes for arrows. What comes to mind is the size and style for the head; the length, thickness, and style for the tail; the position, and the orientation (direction).

One could have a drawing function that effectively says "put down an arrow with the following (long?) list of attributes". This can be simplified by having functions that define what the default values for the various attributes will be, and these stay the same until changed. For example, say one wants several arrows of a given style and size for the head, and given thickness and style for the tail. What might chagne from arrow to arrow is the length of the tail, and the orientation and position of the arrow. So the defaults can be set appropriately, and then each arrow can be specified by a call to a draw function that defines the missing pieces (length, position, orientation).

How do we define position? I don’t know how absolute positions get specified in HTML, but I assume there is a way. But often one wants one’s arrows relative to something else. So it might make sense for objects such as the array to have methods that give back positions. So for example, one could get the position for the middle of the top side of the third cell of the array. Then one uses this to specify the position of a downward-pointing arrow to have an arrow point to the third cell of the array.

The other thing that I think is most useful to AV developers is the ability to place labels. Of course, one can do a lot with HTML positioning. But if one could specify drawing a label in relation to an arrow, that would be really helpful. Currently, Ville has a mechanism for drawing labels in relationship to the array. Of course, that has a number of assumptions and limitations about the possible relationship between the array and the assocated label.

 

ville
ville's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 559
Re: Arrows (and labels)

I think there are many (separate) issues here:

  •   graphical primitives that can be used to add any decorations to the AV,
  •   markers that can be used to point to certain parts of data structures, and
  •   edges pointing from one node to another (like weighted and directed edges in a graph)

I’m sure Guido can give more details, but I think the way Animal(Script) handles these is by having a set of graphical primitives like rectangles, lines, and circles and an (array)marker that can be used to point to indices of an array. We definitely need at least the graphical primitives in JSAV, and I’d be inclined to make adding the arrow (with a label) a general marker to be used with any DS. The edges in a data structure should, in my opinion, be controlled by the structure and not by the AV developer. That is, edges in a tree and pointers in a linked list should be automatically drawn by the library while the AV designer should be able to control the visual properties.

As for the positioning, the current labels in JSAV can be positioned above or below any structure (we just happen to have only array atm) or another label. Again, I think we should copy the behavior from Animal, which allows positioning objects relative to the bounding box of another object. For example, north, north-east, east, etc of the bounding box of an array or an array index.

Ville Karavirta, Aalto University, http://villekaravirta.com/

shaffer
shaffer's picture
Offline
White BeltYellow BeltGreen BeltRed BeltBlack Belt
Joined: 2009-05-28
Posts:
Points: 2019
Re: Arrows (and labels)

I agree with most of this. Yes, that makes sense to treat different functional uses of arrows differently. Definitely the arrows that are drawn as part of a linked list, tree, or graph should be controlled by the layout process of that data structure. The one thing that I am not sure about is the case of arrows used as markers for parts of data structures. I am concerned that we will run into a conflict between making the marking system flexible enough vs. too complex to give the specifications. But again, we also have to balance giving sufficient "high level" support to make defining a data structure easy, but with restrictions, vs. flexibilty by being able to draw primitives, but too "raw" in the way that designers specify all the graphical primitives.

I think a reasonable solution is to provide a general-purpose arrow primitive. We can also provide specific methods for applying markers to the various data structures. To the extent that those supply enough power to the developer, hopefully they are all that is needed. But when the developer wants to do something "unexpected", they can always fall back on the graphical primitive.