UML Drawing Elements

Overview

Below are the CSS attributes and raw submitted answers for the UML drawing elements. There are several examples of using the drawing elements in questions here. You can also check out the docs for the Python classes here.

CSS Attributes

These are the CSS attributes that can be assigned to the UML drawing elements in the HTML file.

pl-uml-class

<pl-uml-class> class-name="Enter Text" grid-size="20" class-name-editable="true"></pl-uml-class>
<pl-drawing-button type="pl-uml-class" class-name="Enter Text" grid-size="20" class-name-editable="true"></pl-drawing-button>

Attribute Name	Type	Default	Description
width	float	200	Horizontal width of the canvas (in pixels).
height	float	100	Vertical width of the canvas (in pixels).
class-name	string	--	Name of UML Class
top	float	100	Y coordinate of UML class
left	float	100	X coordinate of UML class
starting-attributes	list of strings	[]	Starting attributes in UML class
starting-methods	list of strings	[]	Starting methods in UML class
uml-text-font	float	15	Font size of attributes and methods
start-attr-editable	boolean	false	If true, starting attributes can be edited
start-mthd-editable	boolean	false	If true, starting methods can be edited
class-name-editable	boolean	false	If true, UML class name can be edited
grid-size	int	0	Grid size of canvas, if you want the UML class to snap to grid
selectable	boolean	true	If true, the UML class can be moved by user

pl-uml-text

<pl-drawing-button type="pl-uml-text" coordinates="[50, 50]" font-size="15" starting-text="+ Method() : type" text-type="method"></pl-drawing-button>

Attribute Name	Type	Default	Description
coordinates	List of float	--	X and Y coordinates of uml-text format: "[2, 2]" (commas and spaces matter)
font-size	float	--	Font size of text
starting-text	string	--	Starting text, before user edits
text-type	string	--	The type of text. "method" or "attribute" are the only values

pl-poly-line

<pl-drawing-button type="pl-poly-line" dashed="true" uml-line-type="composition" grid-size="20"></pl-drawing-button>
<pl-drawing-button type="pl-poly-line" grid-size="20"></pl-drawing-button>

Attribute Name	Type	Default	Description
umlLineType	string	Default	Type of UML line.
nodes	list of dict	[{"left": 200, "top": 200},{"left": 340, "top": 200},{"left": 380, "top": 200},]	Coordinates of each vertex.
end1Shape and end2Shape	string	"circle"	Type of shape at the endpoint ex. "triangle"
end1Fill and end1Fill	string	"black"	Fill color of endpoint
dashed	boolean	Default	True if dashed
grid-size	int	0	Grid size of canvas, if you want the vertices to snap to the grid

pl-constraint

<pl-drawing-button type="pl-constraint" constraint-type="1..1" coordinates="[200, 200]"></pl-drawing-button>
<pl-drawing-button type="pl-constraint" constraint-type="1..*" coordinates="[200, 200]"></pl-drawing-button>
<pl-drawing-button type="pl-constraint" constraint-type="0..1" coordinates="[200, 200]"></pl-drawing-button>
<pl-drawing-button type="pl-constraint" constraint-type="0..*" coordinates="[200, 200]"></pl-drawing-button>

Attribute Name	Type	Default	Description
constraint-type	string	--	Type of constraint. Values: "1..1", "1..", "0..1", "0.."
coordinates	list of float	--	X and Y coordinates of uml-text format: "[2, 2]" (commas and spaces matter)

Submitted Answers

These are the important submitted answers data that can be retrieved from a student submission. These are not extensive, if you would like to see a the full submitted answer you can turn on debug mode on a specific question and look under associated data. You will see the JSON data under the name of your PL-drawing CSS tag.

Base custom element

Each custom element will have the following in it's submitted answer.

Attribute Name	type	Description
id	int	Id of element
gradingName	string	Type of PL element

pl-uml-class

Attribute Name	type	Description
className	int	The name of the UML class.
attributes	int	Attributes in the UML class.
methods	string	Methods in the UML class.

pl-poly-line

Attribute Name	type	Description
snapData	list of int	Ids of object snapped to. Goes in the order [end1, end2], null is placed in either position if not snapped to an object.
vertices	list of dict	Coordinates of each vertex.
umlLineType	string	Type of UML line.
end1Shape and end2Shape	string	Type of shape at the endpoint ex. "triangle"
end1Fill and end1Fill	string	Fill color of endpoint (may not always be a hex number)
dashed	boolean	True if dashed

pl-constraint

Attribute Name	type	Description
constraintType	string	The type of the key, options are: 1..1, 1..*, 0..1, 0..*
snapData	dict	A dictionary of id and endpoint. Id of line and which endpoint it is snapped to.

snapData Dictionary for constraint

Attribute Name	type	Description
id	int	Id of line snapped to
endpoint	int	Endpoint snapped to. 0 for left 1 for right.