Printer Friendly

Figures: a diagram editor.

The purpose of this paper is to present a general-purpose web application for supplying diagrams and illustrations for inclusion in teaching materials or presentations, and for students' work. It is browserbased, that is, no client software is required. All diagrams are rendered to GIF images (CompuServe 1989), and the project brings a number of innovative ideas about the structure of diagrams.

The starting concept is simple: diagrams are treated in a web page as a set of objects, which are dynamically rendered as individual GIF images, and can be positioned relative to each other and in layers. Such positioning is achieved by specifying distances relative to specified points or edges of other objects, here called attachment points. For example, a rectangular box has nine attachment points by default, but user defined objects can specify their own set of attachment points. Examples of objects with natural attachment points include UML elements (OMG 1997-2008), or electronic components.

Lines can also have their ends attached to objects: they can also be given a user-defined arrow style that associates shapes that are automatically placed on the source, destination and body. If an elbow is defined for the arrow, then the arrow consists of horizontal and vertical segments, and a preference for the starting direction to be horizontal or vertical can also be specified.

Diagrams can also have annotating text labels, which can be attached to objects, and text can be aligned or centred horizontally and/or vertically. In addition to the usual box, rounded and ellipse shapes, pie slices and segments, cropped images are available together with free style and polygonal shapes, and objects can be grouped freely or into tabular arrangements, and objects and points can be detached from or added to groups and shapes. Background images, line and font styles and fill colours can be defined on a per-object basis.

Finally, there is an RDF style (Resource Description Framework, W3C 1999, 2004) which can be added to any object, thus enabling interesting diagram semantics to be captured. Arrow styles and object types in the customisable menu could have placeholders and attachment points of semantic significance; and, since all the data is held in a simple database, separate applications and search engines can be used to analyse the meanings of the diagrams. There are many ways of building metadata associated with diagram types, so the possibilities here are deferred to another document. Here it is sufficient to note that diagrams then naturally form part of a semantic hypergraph as reported elsewhere in the literature (Alawneh et al 2006, Bardohl et al 2004, Koth and Minas 2002, Minas 2004). However, the approach taken here is in some ways the opposite of Minas' DiaGen, since the goal here is a general purpose editor to which custom object types and semantics can be added., rather than a way of visually editing a (potentially large) abstract graphical structure.


The diagram should be modifiable using web based manipulation (keyboard and left mouse button only): modifications are non-destructive, so that collaborators can compare versions and choose which version to refer to. Such "forking" behaviour in software projects is generally seen as undesirable (e.g. Hill 2005), but is probably a good thing in the evolution of visual aids and other diagrams. The whole area of graphical editing is subject to a large number of patents. While the concept of "attachment point" is well referenced in patents, this software is presented here following a search of relevant patents, and its methods are believed to be non-infringing.


The diagram system consists just of a sql script that sets up the basic diagram table, five php files: diagram.php, image.php, update.php, object.php, export.php and associated help htm files. No client configuration is required, but the use of a DHTML-capable browser such as Internet Explorer (IE6+) or Firefox is assumed. The advanced editing capabilities are all implemented using JavaScript, so that the editing system is necessarily open source. The JavaScript is always included if the diagram.php script is used.

A diagram is specified by a URL containing the host (and optionally, port) on which the service is provided, a reference to diagram.php, and a query portion that specifies the figure ID (and optionally, the database containing the diagram table), e.g.


A much smaller download results from http://localhost/figure.php?fig=7815 (there is an edit button to begin editing). If you don't want the edit button, just use http://localhost/image.php?fig=7815 , which as its name implies, generates a single GIF image.

Entries in the database are always chained to the previous entry, and can indicate deletion of an entry. Each page request starts either from a given diag ID, or from posted data that specifies the diag ID and details of the current action. The diagID represents the last entry in the diagram table that it knows about.: in the case of posted data the database may be modified resulting in a new diag ID. The diag ID and current choices in the action box are included in the web page as hidden data. The PHP script works backwards, constructing a set of data structures that describes the page.

This design means (alas) that we can't tell whether any entry is no longer required, since any entry may (for example) be the diagID of a diagram referenced in a book, and hence in principle required indefinitely.

Instead, if a server becomes full, a set of diagrams can be identified to be copied to a new server, using the export and import mechanism described in the next section.

The database

The figures database contains a single table called DIAGRAM. This table has 20 columns, all of which except descr are integers:

(id=0, prev=1, obj=2, typ=3, descr=4, latt=5, 1pt=6, 1=7, tatt=8, tpt=9, t=10, watt=11, wpt=12, w=13, hatt=14, hpt=15, h=16, z=17, style=18, grp=19)

id: unique identifier for diagram record, identifies the diagram described by entries chaining back from here. Each id thus (in principle) defines a new diagram. prev is only null for the last record in the chain). All the other entries can be null, though obj is only null when an object is being created: the object identifier of a new object is the primary key.

prev: previous row in the diagram.

obj: this entry is null if the row defines a new Object. Otherwise, it gives the id of the row that defined the Object. In either case, the remaining entries of the row give a complete account of the object (not its attachments), or are all null indicating the object is no longer in the diagram. Objects can be placed in menus or on the drawing surface; objects not in use can be deleted from menus.

Type: There are two main kinds of record type: objects and styles. A style can be shared by objects, so if a style is imported, an existing style with the same properties can be reused. For this reason if a style is modified, a new style id is created for the modified style, so that for styles the objid is always null. Styles 4-10 never have empty Descr fields unless the behaviour in question is being cancelled. Objects are normally not shared or instanced so that modifications result in a new record identifying the object id of the object being modified. If an object becomes a member of a group or is used in a style (menu, arrow), it becomes shareable; and then any change results in the object being deep-cloned.

Types 0-22 are predefined; Types above 22 are user defined types (an obj): obj's that are groups can be used as types.

The editor makes some efforts to ensure that attachments form an acyclic graph.

?Att (for ?=L,T,W,H) indicate an object to which the current constraint relates: if null, ? refers to the edge of the picture surface. If an object is deleted from the diagram, objects attached to it are deleted also. An object cannot be added to a group if it is attached outside the group.

?Pt: (for ?=L,T,W,H) can indicate a particular attachment point in the ?Att object, and indicates how ? is computed relative to the ?Att .

For selectable types L, T, W, H behave as discussed under ?Att and ?Pt and generally denote a distance in the appropriate direction from the attachment point. The rules for styles are different, especially style 9.

Z is the z-index attribute if specified.

User defined shapes and groups While measuring dimensions, nodes can refer to positions of other nodes, but such references do not pass through group boundaries: moreover, the only references in group elements are to the parent group.

In Point mode the L and T rows of the edit panel can be used to adjust individual points (the W row shows which point is being edited). The Point menu item can be used to place a new point.

If a group is selected and the menu style is added to it, it is placed in the shape chooser. The shape chooser is visible only with the Predefined menu, which can be used to place a selectable copy on the diagram. When the shape chooser is visible, the color and line styles items are not displayed.

An arrow style uses the 4 rows of the positioning table to select (attach) up to 4 polygons for the source arrowhead, the destination arrowhead, the body, and an elbow. A new arrow style is defined choosing these elements. The new style is added to the shape chooser for Line styles (which shows it as a horizontal arrow with the given source and dest).

A new predefined colour is defined by giving the R, G, B values explicitly and a name for the colour. During this process the colour is displayed. The new colour is added to the predefined colour menu.

Loading a diagram

The algorithm for loading a diagram from the database uses two lists of IDs (called Toget, Done) maintained in descending order. In the following description of the algorithm it is understand that no change to these lists occurs on addition of a null ID. Initially Toget contains just the diagram ID.

While Toget is non-empty, the database is queried to get up to 100 diagram rows in descending order starting at the topmost entry of Toget. Then from these 100 rows, if the entry matches the head of Toget, it is processed as follows: the head of Toget is removed, prevID is added to Toget. If ObjID is null, the ID value is used for ObjID. If ObjID is already in Done, no further processing of the record occurs; otherwise the details as they relate to ObjID are recorded, ObjID is added to Done. The Diagram is then built from the retrieved data.

Button colours: TYI Pink, STY Orange, LAT Red, TAT Blue, WAT Green, HAT Purple The rows are sometimes relabelled: for example, Scale and Angle instead of Width and Height. Which sections of the panel are visible depends on the object type most recently selected when in Idle state or the most recently selected object Type (from the TY dropdown list). The edit panel shows as follows for some different object types:


Attachment points and dimensions

Many objects occupy a rectangular area, and each edge can be optionally anchored (or attached) to other objects. In this section we will call these constraints Lp,Tp,Wp,Hp when they are defined. In this section such a rectangular shape is defined by 4 quantities called L,T,W,H. The nomenclature is sometimes confusing because for some diagram object types (user defined shapes, or arrows), W and H are not always the width and height: in particular, they may be negative to indicate a reversal of orientation.

Consider the following.

x1 = Lp.x+L if Lp is defined, otherwise x1 = L

y1 = Tp.y+T if Tp is defined, otherwise y1 = T

x2 = Wp.x+W if Wp is defined, otherwise x2 = x1+W

y2 = Hp.y+H if Hp is defined, otherwise y2 = y1+H.

Then PX = min(x1,x2), PY = min(y1,y2), PW = max(x1,x2)-PX, PH = max(y1,y2)-PY . Then we always have PW and PH positive.

Text labels have alignment, which controls the placement of the text relative to the attachment point. The default alignment for a free text label is Top Left, for the caption of a box, line etc is Centre Middle.

Text labels can be attached to others or to shape points, and arrows can be attached to source and destination. Text labels have an identity, are placed in the diagram by providing a position (relative to another, or relative to the main canvas). When an element is positioned relative to another it is treated as a dependent element: repositioning or deletion of an element affects its dependents, and may also affect the width and height of a containing element (and so on).

Text labels can be moved by dragging with the mouse. Text labels are moved using DHTML styles. This mechanism also moves the enclosing shapes and any attached objects (but not the object to which the moved object is attached). If a shape point or intermediate point is selected for moving, its position is temporarily indicated by a dashed enclosing border that can be moved to indicate where it should go.

Objects are drawn as images, relative to the objects they are attached to. Shapes and arrows have styles: additional styles can be added (based on an existing one). Arrowheads are positioned to touch the shape they are attached to if any.

Objects can be grouped or arranged in tables. A text label may be placed directly in a table, or it may be converted to a box first.

In addition, an object creates attachment points (e.g. 9 for a box) which can be used for attaching other objects. For a label, just 1 attachment point is defined, determined by the alignment.

Editing concepts

If no object has been selected, the possible actions are: title, background, email, label, line, image and box, table and shape. In all cases, after selecting the new object type, a position (and/or extent) can be indicated using the mouse. Labels are added by typing: the label appears at the selected position. Line, image and box are placed at the selected position (failing which, at the mouse position, or arbitrarily) and selected so they can be moved. If a table or shape is being added in this way, this only works if the selected extent contains elements that can be aggregated into the table or shape.

Alternatively, an existing object can be selected. In this case a boundary and a set of attachment points are added to the diagram. Individual cells of a table can be selected: the attachment button lights up matching an attachment point at the top left corner of the table: selecting the attachment point selects the table itself. At any point, one object and optionally one attachment point (and/or edge) has been selected. A selected object can be deleted with the delete key.

On edges: Want to detect adding line to edge of box (rather than to an attachment point). Edges can be numbered 0=top,1=right,2=bottom,3=left. Don't need to highlight these because it is obvious from attachment of the line.

In all cases, the position of the new or changed object is shown in the edit panel above, and this can be fine-tuned before Apply is clicked. (We probably won't separate Apply and Submit, because it is too hard at this stage to preview the new diagram.)

Objects can be added to a table or shape using the style button, and removed using the attachment button. For a table the cell is added as the next element in the first incomplete column if there is one, or else as the first element of the next row if the new object is below the table, or the first element of a new column otherwise.

The type of a selected object can be changed: from label to box (and back), from line to box (and back). Changing the type of a table or group to a non-grouped object type leaves the elements ungrouped, and deletes the table or group object. Changing the type of a line or box to a shape adds the points to a shape: changing a shape to a line or box is only possible if the shape consists of (approximately) a single line or box.

The selection process uses a selection colour: black by default, other colours are used when making a new attachment: If no objects are selected, mouse movements will highlight bounding rectangles in a grey version of the selection colour until a mouse click selects an object. The escape key causes the diagram to be reset.

Once an object is selected, the attachment points will show: by default the centre attachment point is selected, but another one of these can be selected by mouse click. Most shapes show the default set of 9 attachment points. The edit panel will show the properties of the selected object.

Mouse-down will select the object, and dragging will move the object (or just the attachment point if this is possible). Dragging a non-central attachment point resizes the object by adjusting only the relevant side(s). Attached objects will be moved/resized with the object being dragged once the change is submitted.

For some objects, a selected attachment point can be deleted with the delete key. For such objects, the insert key will add a new point between the two points nearest the mouse position. An attachment point can be deselected by left-click on the object: the object can be deselected by the ESC key.

If a menu item is selected, the Enter key will make a new object of the required type (except for text where some characters need to be typed first). With no objects or menu items selected, typing text will insert the text at the mouse position, and this continues until the Enter key is used. If an object is already selected, it will be used as LT attachment for the new object. An object's type can be changed using the edit menu.

Changing the edit type in the edit panel may be done without changing the selections in the drawing area: for example, a style can be constructed for the current object. To facilitate this, changing the item type in the edit panel will clear the property values. When apply/submit is selected (a) a new style is constructed (appending to any existing style for the selected object) and (b) the object is modified to have this new style.

To attach the selected object to another object, click on the appropriate item on the edit menu, and then select the attachment point: the previously selected object does not move, but the offset is recomputed from the newly attached object or attachment point. It is not possible to create a dependency cycle in this way, since the editor does not allow attachment to a dependent object. To remove an attachment, use the same key or menu item with CTRL: again the object does not move, but the position is recomputed absolutely rather than relative to the attachment.

The bounding rectangle of the selected object will be highlighted with a dotted border. Potential attachment points will be shown with open squares bordered in grey: a selected attachment point will show as solid. The shape object has a variable set of attachment points: these are all given in addition to the LR and RB corners of the bounding rectangle. Note that for captioned lines the bounding rectangle includes space (above and to right) for the caption.

If the object is attached then there will be attachment points highlighted elsewhere: for example, the L and T attachment points will have matching colours to the LT point on the selected object. For example, the LT corner coloured green, and then the L and T attachment points if any will be coloured green (rectangular to differentiate them: the long side matching the facing side of the LT square); the BR corner coloured blue, and the R and B attachment points if any coloured blue.. The selected object can be moved in its entirety or just a selected point.


The editor contains a number of specially-developed algorithms which can be seen as a contribution to knowledge for this area. These algorithms come in different aspects:

a) For collecting the data from the database, and minimising the amount of information added for each change to the diagram

b) For intuitive but exhaustive selection of objects, points and edges when objects overlap

c) For intuitive default attachment of objects and lines, and means of managing and modifying attachment

d) For avoiding (and detecting) cyclic dependency in the mutual attachments of objects

e) For adjusting the ends of lines (and arrows) so that the arrowhead is not obscured by the object it is attached to.

Hit calculation involves potentially a set of rectangular regions. Hits are counted, and each object is marked with the number of the hit it receives. The set of object is ordered from low to high hit numbers. This simple device enables selection of the right one in a group of overlapping items, as each time the selection is made a different element is at the head.

For creating groups (tables, shapes) based on a region of the diagram the update.php page needs to reuse a lot of the intelligence required to build the diagram. If the Group mode has been selected, the mouse can trace out a rectangular region to contain the objects to be grouped. Then Apply groups the set of selected objects, detaching them from their current attachments if any and reattaching them to the new Group object. (This requires update.php to access the database and work out which objects are to be grouped.) A group can contain one or more objects, and can define a set of attachment points to override the default 9 points. The boundaries of the group are maintained as the minimum to contain the group's objects.

Groups can be resized, scaling their contents. This makes for some exciting wrinkles in the algorithms. The intrinsic extent of contents can be calculated by traversing just the immediate members of the group, so that their positions (relative to the group point 1) can be scaled using these intrinsic dimensions and those of the group. The JavaScript objects always work with the scaled dimensions (these are generated in the styles and details).

If the shape mode is selected, mouse clicks add new visible points in Javascript. On Apply, a new Shape is created with the given colour as the colour of lines, and the given set of points.

When placing points, the cursor changes to a crosshair. This happens only when nothing is selected, and the panel mode has just been changed to Shape. In this mode, individual points placed with mouse clicks, or a path of points can be dragged out by holding the mouse down. The enter key can be used to close a shape. The color and line styles can be selected prior to using the Apply button to create the shape. By default, the shape is open and unfilled.

Points can be selected and moved with the mouse or panel, and added with the Point mode in the panel. (Point mode is otherwise disabled.)

If a shape is used as a style, its contents are rendered as part of the object it styles. We need to be able to specify orx,ory,scale and rot. These are given as X,Y,W,and H of the Instance node type.

Tables automatically organise their members into rows and columns. The assumption is that any distance over 10px is probably significant.

So: we build two arrays rbd and cbd for the row and column borders, which are then sticky for resizing the cells. (This is a little naive, since there is no particular ordering on cells.)

Copy and Paste

Export: export.php should provide an xml file showing details data, using the database order of records. For export, diagram.php identifies the objects in the multiple selection and transmits the location to place the clones.

For group and table, diagram only identifies the region and there would probably be a difficulty if the region is moved. Probably better to use a similar approach in the two cases.

This means that in update.php we don't need to identify the candidates for the group from the bounding rectangle. On the other hand we still want to update the attachment and positioning information (at least for groups and tables) so we still need to build the diagram.

When an export URL is being constructed, the software knows that the effective size (and current position) is. Export.php should provide an XML file showing details data in order from referee to reference. The whole diagram or just a set of objects can be exported. The XML format consists of an optional set of object identifiers (if this list is missing it is a whole diagram) and a sequence of record elements corresponding in every way to the database records except that the id and prev fields are omitted. The XML data satisfies two completeness criteria: (a) if a list of objects is specified, every such ob id has a record (the records may supply data for other, dependent, objects), (b) every id named as a user type, attachment, style or group has a record.

<figure url=".." database=" " fig="nnn">

<objects> <obj ref="nnn"/> ... </objects>

<record typ="tt" ref="nnn" etc /> ... </figure>

When the export data is constructed, the opposite criterion applies: objects attached to the named ones are included by default. On the other hand, if the named objects in their current location are attached to some objects that are not part of the export, the attachment information is lost in the export and the position information is given absolutely. This convention for example allows (detached copies of) members of groups to be copied.

The algorithm to do this is rather fun. We begin, as usual, by collecting all the database records that make up the figure (in reverse order of database entries, following prev links). As we go, we note nodes that are top level (not attached to anything, though may have a style). This gives a set E consisting of all top nodes, or the nominated ones. Iteratively add to E all nodes attached to nodes in E, or referred to as styles of nodes in E. Then break any attachments to nodes that are not in E (this step is not required if the whole diagram is being exported, but in order to perform it, export.php needs to be able to compute the position of everything). Finally output the resulting data for nodes in E.

Import: We need to clone everything in just about all cases. If the import data is not an export.php, treat it as a text label. Style entries are created if they are not found in the target figure, and objects are deep-cloned.

If the URL specifies export.php and the host and database match there is a shortcut which avoids using export.php itself. If the figure also matches, all that is needed is to add new shallow copies of the objects, updated to fix attachments and relocate them.

If the figure does not match, construct linklists of all of the database records (styles etc) used by fig and imfig. For each entry in the imfig list, if the same entry is not in fig, clone it and remember the mapping from old to new id.

Otherwise use XML data supplied by export.php, similarly: if the record matches exactly with data in the current database, take no action, otherwise clone it and remember the mapping form old to new id.

Import could be XML data or a URL leading to XML data. If the import data is anything else, treat it as a text label.

For export, diagram identifies the objects in the multiple selection and transmits the location to place the clones.

For group and table, diagram only identifies the region and there would probably be a difficulty if the region is moved. Probably better to use a similar approach in the two cases.

This means that in update.php we don't need to identify the candidates for the group from the bounding rectangle. On the other hand we still want to update the attachment and positioning information (at least for groups and tables) so we still need to build the diagram.

Areas for further work

1. There is no good way to specify diagram defaults. (E.g. current grid size, default font size)

2. Immutable styles cause a problem for altering or localising menus. The predefined object menu provides a mechanism for reviewing the list of such objects and editing it. (Deletion of a predefined object simply deletes the group/shape.) At present colors and arrow styles can be added but not removed, and new fonts could also be added but then cannot be changed. (Word doesn't allow styles to be removed if they are in use, and doesn't support changes to fonts.)

3. The editor is not localised. Using the database model to localise the editor UI would not be a good idea, since this is diagram specific rather than locale-specific. It will be better to make localisation of the editor into an installation matter by supplying the UI strings in a separate database table.

4. The name of a font is supplied in the descr field but comes from a predefined menu. It is a bit annoying that font names are repeated in the individual style. We can allow a new font to be added. Doing this would make type 12 into a sort of style/object hybrid (so that if a Font record introduced a new font family it would would actually define a type 12 database record.

5. Colours are added to the colour menus by defining them. There is currently no way to remove them.

6. The name of a predefined group is added to the predefined list by attaching a menu style to it, which specifies the name to appear in the menu.

7. An arrow style is added to the diagram by defining it. There is currently no way to remove an arrow style.


Alawneh L, Debbabi M, Hassaine, F., Soeanu A. (2006): On the Verification and Validation of UML Structural and Behavioral Diagrams, Advances in Computer Science and Technology (ACST 2006), 088986-545-0,

Bardohl, R., Ermel, C, Weinhold, I: (2004) GenGED--A visual Definition Tool for Visual Modeling Environments, Lecture Notes in Computer Science 3062 (2004) 978-3-540-22120-3, p.413-419.

CompuServe Inc (1989) Graphic Interchange Format

Hill, B. M. (2005) To Fork or not to Fork: Lessons from Ubuntu and Debian.

Koth, O., Minas, M. (2002) Structure, abstraction and direct manipulation in diagram editors, In: Hegarty, M.; Meyer, B.; Narayanan, N. (eds.) : Diagrammatic Representation and Inference (2nd Int. Conf. Diagrams 2002, Callaway Gardens/USA, April 2002). Berlin : Springer Verlag, 2002, S. 290-304. (Lecture Notes in Artificial Intelligence)

Minas, M. (2002): Concepts and realization of a diagram editor generator based on hypergraph transformation . In: Science of Computer Programming 44 (2002), (2), p. 157-180

Minas, M. (2004): Visual Specification of Visual Editors with VisualDiaGen, Lecture Notes in Computer Science 3062 (2004) 978-3-540-22120-3, p.473-478.

OMG (Object Management Group) (1997-2008): the Unified Modeling Language

W3C (World Wide Web Consortium) (1999): Resource Description Framework (RDF) Model and Sytax Specification.

W3C (World Wide Web Consortium) (2004): RDF Semantics.

Malcolm Crowe

School of Computing,

The University of the West of Scotland.
Types 0-22 are predefined; Types above 22 are user defined types
(an obj): obj's that are groups can be used as types.

The editor makes some efforts to ensure that attachments form an
acyclic graph.


0 delete Pseudo type for deleted objects.

1 import Pseudo type used to paste objects from another
 figure (using data created by a copy operation),
 or text from the clipboard.

2 export A pseudo type for cloning objects in a given
 region. Some data is placed in the descr field as
 a URL. The ACT button can then be used to cut/paste
 the objects in the current figure.

3 point pseudo type for adding a point to a shape
 (not used in the database)


4 tip text that appears when the mouse hovers (behaviour
 differs in edit and non-edit mode).

5 colour A colour: L,T,W are R,G,B

6 hyperlink These are attached to image components and can be
 combined into a map on grouped objects.

7 trigger URL to advise a new version of the figure.
 Parameter ?fig= is supplied giving the ID of the
 new figure.

8 background descr is backgroundImage. latt is fill or
 background color, L is background repeat, Txx is
 background attachment, watt is drawing color

9 font/style Descr is the font filename, latt is color, L is
 size*10. watt is a fill colour (for box, ellipse,
 polygon). Lpt is alignment. H fields are for line
 attributes HAtt is line colour, HPt is thickness,
 H is line style (0 is solid). Remaining fields are:
 For Ellipse, T is start and W is end angle. Tpt is
 PieEdge (0 is no radii). For Image, Tpt is crop L,
 T is crop T, W is crop R and WPt is crop B. For
 Line, TAtt is an arrow style, and Tpt is the line
 behaviour (0=oblique, 1=horizontal-vertical, 2

10 about RDF

11 arrow Defines a preset arrow style (not a particular
 arrow) The LAtt and TAtt show the ids (primary
 keys) of the polygons used for src, resp dest if
 any (defining is for the destination end of an
 upward-pointing arrow). WAtt if defined is id of
 the polygon for the middle part of the arrow. HAtt
 if defined is the id of the polygon for an
 upwards/rightward corner, for a non-oblique arrow.
 Any of these entries can be null: if all are null
 this is the style of an undecorated line segment
 (the default arrow style id=200).

12 menu allows definition of custom types, colours etc.
 Descr is the menu item to display. The menu style
 can be added to a group object.


13 label display descr. A text value to be used as a free

14 line unconstrained straight line defined by L,T,W,H
 (W and H can be negative, so that L and T is the
 source). Text may be "" otherwise is rendered along
 the line. The line can be constrained by attaching
 the ends to something.

15 image Descr is the url of the image (GIF format is best).
 Image cropping can be specified: in the database
 this uses style 9 above.

16 box Text may be "", otherwise is centered in the box.

17 rounded A box with different graphics

18 ellipse A box with different graphics: also used for arcs,
 pie slices etc, using the additional arc
 information given in the database by style 9 above.


19 group W and H are initially determined by content
 (auto-adjusted when group is created) but can then
 be used to resize the contents. All children just
 give the group object as Grp, and their L and T are
 always relative to the group centre (attachment
 point 0 of the group). A group can have a set of
 attachment points, coded relative to the centre and
 placed in Descr, except for the zeroth, which
 defines the midpoint itself, and these can be used
 as attachments to objects outside the group.

20 table Allows definition of an object that contains (a
 nonempty set of) selectable but not movable
 children. They nominate the table as their group.
 Elements added to the group are resized and/or
 moved (up to +-15px) to fit snugly together in rows
 and columns, so that a table can be easily
 constructed from a set of loosely-placed boxes.

21 polyline A collection of points joined using lines. Descr is
 a comma-separated list of integers (as in Group)
 giving the points (normalised so that 0,0 is the
 centre). L,T,W,H give overall location of the
 shape: however, W is a scale factor and H is a
 rotation angle, measured clockwise in degrees. If W
 is attached, the W value is the proportion of the
 distance to the attachment point. If H is attached,
 the vertical through the centre is rotated to pass
 through the attachment point before the H value is

22 polygon a closed polyline: may also have a fillcolor
 (defined using style 9 above)

(23) predefined This type is used for user defined types
 (type>274). The type id must be the object ID of a
 Group, a copy of which is centred at (L,T), W and
 H are width and height, but if either or both is
 negative, the object has been flipped.
COPYRIGHT 2008 University of the West of Scotland, School of Computing
No portion of this article can be reproduced without the express written permission from the copyright holder.
Copyright 2008 Gale, Cengage Learning. All rights reserved.

Article Details
Printer friendly Cite/link Email Feedback
Author:Crowe, Malcolm
Publication:Computing and Information Systems
Article Type:Report
Geographic Code:4EUUK
Date:Feb 1, 2008
Previous Article:E-curves: a method for visualizing and analysing software evolution.
Next Article:The cross entropy method for the N-persons iterated prisoner's dilemma.

Terms of use | Copyright © 2018 Farlex, Inc. | Feedback | For webmasters