The following paper was originally published in the Proceedings of the Sixth Annual Tcl/Tk Workshop San Diego, California, September 14–18, 1998 The Tycho Slate: Complex Drawing and Editing in Tcl/Tk H. John Reekie and Edward A. Lee University of California, Berkeley For more information about USENIX Association contact: 1. Phone: 510 528-8649 2. FAX: 510 548-5738 3. Email: [email protected] 4. WWW URL:http://www.usenix.org/ The Tycho Slate: Complex Drawing and Editing in Tcl/Tk H. John Reekie and Edward A. Lee School of Electrical Engineering and Computer Sciences University of California { Berkeley Berkeley CA 94720 fjohnr,[email protected] let Abstract This paper introduces the Slate package, which has been developedaspart of the Tycho project at UC Berkeley. The Slate is layered over the Tcl/Tk can- vas, and contains features that we believe to be useful for implementing complex graphical editing and vi- Figure 1: A fragment of a visual program sualization widgets. The rst key feature is the abil- ity to de ne new item types in Tcl. The second is an We decided very early on that our implementation implementation of the concept of interactor, which would b e only in [incr Tcl], in order to guarantee abstracts low-level mouse events into self-contained p ortability. More recently,we used the namespace objects. The thirdisaccess to and modi cation of facility of Tcl 8.0 to p ort the co de to Tcl 8.0, and it items based on their shape, rather than raw coordi- now runs in either Tcl and [incr Tcl]. Although the nates. Combined with a straight-forward implemen- Tcl-only decision presented its own set of implemen- tation of the model-view-control ler architecture, the tation challenges, wewere able to achieve acceptable Slate is capable of implementing quite sophisticated p erformance and the p ortabilitywe desired. The graphical editors. Slate should, in fact, work with any canvas exten- sion, since it uses only the standard canvas interface provided by Tcl/Tk. 1 Intro duction After some exp erimentation, we ended up with a package that implements the following: The Tk canvas provides a simple but p owerful set of structured graphics primitives, and is p erhaps User-de ned items The key feature that makes the easiest to olkit available for drawing simple 2D the Slate useful is the ability to de ne new item graphics. When we started to use the Tk canvas typ es in Tcl. Items can b e comp osed recur- with a view towards implementing various graphi- sively, pro ducing a straight-forward visual hier- cal diagram editors, however, we realized that we archy, as is common in many graphics packages needed a more p owerful layer of abstraction. see, for example, [2]. All of the canvas meth- To illustrate, gure 1 shows a mo ck-up visual pro- o ds are rewritten to handle hierarchical items. gram of the kind that wewere interested in im- plementing. This is a sample of a language devel- Item shap es Every item has a shap e, suchas op ed in [10]. The rectangle marked \let" encloses point, rectangle, polygon, or a custom-designed an expression, and the value of the expression is shap e. Items can b e queried for the co ordinates indicated by the arrow connecting the two trian- of a feature, such as the north-east corner or the gular \terminals." The let-expression itself is con- second vertex. Items can b e requested to move nected to another function b ox. Items within the one or more features, reshaping the item. let-expression can b e moved only within that frame, while moving the whole frame will moveeverything Interactors Event-handlers can b e b ound to any contained within it. This combination of hierarchy level of the visual hierarchy. In addition, we and complex user interaction necessitated a higher- implemented a more abstract and more p ow- level framework than the raw canvas. erful user interaction framework, in which par- Shape Rectangle Oval Line Interactor Point Polygon bind unbind Item Slate Canvas tags coords children bind addtag create feature delete move find reshape ComplexItem SimpleItem parent {children /= { }} {children = { }} Figure 2: The key framework classes 2.1 Complex item classes ticular sequences of user interaction events are abstracted into ob jects called interactors. To add a new item typ e to the slate, the pro- We also added other useful metho ds, such as high- grammer sub classes the ComplexItem class. Once lighting and selection. Unlike many research to olk- de ned, items of the new typ e can b e created and its, we did not implement a constraint system, for manipulated just like regular Tk canvas items. For reasons detailed in a later section. example, one of the item typ es that we supply with the Slate is called Frame , b ecause it mimics the ap- p earance of the Tk frame widget. To create a new 2 The core graphics framework frame on a slate, we can execute co de such as this: set frame [$slate create Frame \ The Slate is implemented as a set of classes, or- 50 50 100 100 \ ganized around one key class called Slate .Wehave -color green -relief ridge] tried to make the Slate a plug-in replacement for the Tk canvas. A simple example: which pro duces the item shown at the top left of set slate [::tycho::slate .s \ gure 3. This item b ehaves likeany other Tk canvas -height 300 -width 400 \ item { for example, we can change its co ordinates: -background white] $slate coords $frame 70 70 140 120 pack $slate -fill both -expand 1 We can move it: Figure 2 shows a conceptual representation, in the Ob ject Mo deling Notation [11], of the key classes. $slate move $frame 40 20 The diagram is conceptual only, b ecause manyof these classes do not in fact exist { in the implemen- We can get a list of items overlapping a given region tation, they are faked using Tcl pro cedures, canvas of the canvas, which will in this case include this item tags, and asso ciative arrays. item: The Slate class is wrapp ed around a Tk canvas. It contains an arbitrary number of Item s, which are set found [$slate find \ graphical elements that app ear on the screen. An overlapping 100 100 200 200] Item is either a ComplexItem , which is in turn an aggregation of Items, or a SimpleItem , which rep- Figure 3 shows several other complex item typ es. resents a single Tk canvas item such as a line or At the top rightisaSolid , which is a p olygon with rectangle. Each item has a Shape see section 2.3, a pseudo-3D b order like Frame ; at the b ottom left and can b e op erated on by an arbitrary number of is a LabeledRectangle, which is a rectangle with a Interactor s see section 3.2. lab el and arbitrary graphics nested within it in this Figure 4: A dynamically-constructed complex item Figure 3: Some pre-de ned complex items will return f50 50 100 100g. The co de $slate scale $citem 50 50 0.5 1.5 case, two lines; at the b ottom rightisaSmartLine, which is a line that, given two end-p oints and the will scale the item, pro ducing the item at the center directions at those ends n, s, e,orw, draws itself of gure 4. as one or more orthogonal segments. We emphasize In general, arbitrarily complex items can b e built that these items are a sample of those that we found up this way. Figure 5 shows one such hierarchy, sim- useful for building graphical editors, and that it is ilar to those we use in one of our graphical editors. quite simple to create new item typ es or to extend As a general rule, a programmer should de ne a new existing typ es by sub classing. sub class of ComplexItem when a particular graphi- 2.2 Constructing hierarchy cal representation is used again and again, and use dynamic comp osition of items, such as just given, Any sub class of ComplexItem can add items to it- when items are combined as part of the editing op- self, thus creating a recursive hierarchy of items. For erations in a graphical editor. example, a Frame item consists of four simple items: a rectangle for the central surface, two p olygons for 2.3 Shap e the \lit" and \shaded" b orders, and a transparent rectangle that is used as a place-holder for the co- Each item on a slate has a shape. Shap es provide ordinates of the whole Frame . more sophisticated control over the co ordinates of In addition to creating hierarchyby creating new an item than just its raw co ordinates. Simple items item typ es, an instance of the ComplexItem class have a shap e that cannot b e changed; complex items can have arbitrary sub-items added to it. To illus- have a shap e that is determined by the class de ning trate, we can create a blank complex item: that item. Prede ned shap es mimic the primitive canvas item typ es: point, rectangle, oval, line , and set citem [$slate create ComplexItem \ polygon. 50 50 100 100] An item with a given shap e has a set of attributes called features.Features are inspired by Gleicher's The co ordinates give the region to b e o ccupied by work on constraint-based graphics [3].